Solved

How to make mouse-over on hyperlink with image url

Posted on 2008-06-13
27
2,103 Views
Last Modified: 2013-12-17
Hi Experts

I have several hyperlinks using an Image Url.
Is it possible to have a mouse-over effect - like a:hover on this?

Exempel code:
<asp:HyperLink ImageUrl="images/knapp_lesmer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx?Vare={0}") %>'></asp:HyperLink>

Thank you
0
Comment
Question by:Raggdog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 13
27 Comments
 
LVL 22

Expert Comment

by:prairiedog
ID: 21779738
What exact effect do you need?
0
 

Author Comment

by:Raggdog
ID: 21779804
I want the image to switch to another
0
 

Author Comment

by:Raggdog
ID: 21779836
I want the image to switch to "images/knapp_lesmer_over.png" on mouse-over...
Is this doooable?
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 22

Expert Comment

by:prairiedog
ID: 21779865
Here you go:
http://ecybers.com/webdesign/javascriptonmouse.htm

Let me know if you have trouble undertand or implement this JavaScript example.
0
 

Author Comment

by:Raggdog
ID: 21780026
well, maybe I do all wrong, but I does not seem like I can write 'onMouseOver=....' inside a <asp:Hyperlink>
This exampel is for a href?
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21780287
OK, in your Page_Load event handler, add this line:
this.lnkLesmer.Attributes.Add("OnMouseOver", "this.firstChild.src='" & newImagePath & "'");

If you want to change the image back to the original when user move away their mouse, then you need to add this line after the above line:
this.lnkLesmer.Attributes.Add("OnMouseOut", "this.firstChild.src='" & origianlImagePath & "'");
0
 

Author Comment

by:Raggdog
ID: 21780378
I'm sorry for my ignorance, but where in this do I write the name of the images? Both the original ; knapp_lesmer.png and the mouseover; knapp_lesmer_over.png?

This is very new to me - sorry...
Thank you
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21780778
It's ok. Say you store all your images under a folder called "Images" in your web application, you can change those two lines of code as follows:
this.lnkLesmer.Attributes.Add("OnMouseOver", "this.firstChild.src='" + Request.ApplicationPath() +
                      "/Images/knapp_lesmer_over.png'");

this.lnkLesmer.Attributes.Add("OnMouseOut", "this.firstChild.src='" + Request.ApplicationPath() +
                      "/Images/knapp_lesmer.png'");

0
 

Author Comment

by:Raggdog
ID: 21781050
Thank you for you patience 'prairiedog'. I did what you said, and I got this error:

Compiler Error CS0117
butikk does not contain a definition for 'lnkLesmer'

Am I missing something?
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21781083
'lnkLesmer' is your HyperLink's ID. I copied it from your example code.
0
 

Author Comment

by:Raggdog
ID: 21781190
Yes I know, and I have double checked it and that is correct.
Why does I get this error then?
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21781225
Where did you put those two lines? Post your code please, including your aspx page.
0
 

Author Comment

by:Raggdog
ID: 21781329
Here is the hole mess...:)

Thank you again
//This is .cs
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class butikk : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.lnkLesmer.Attributes.Add("OnMouseOver", "this.firstChild.src='" + Request.ApplicationPath() +
                      "/grafikk/knapp_lesmer_over.png'");
        this.lnkLesmer.Attributes.Add("OnMouseOut", "this.firstChild.src='" + Request.ApplicationPath() +
                      "/grafikk/knapp_lesmer.png'");
    }
}
 
 
//this is butikk.aspx
 
<%@ Page Language="C#" MasterPageFile="~/HovedPage.master" AutoEventWireup="true" CodeFile="butikk.aspx.cs" Inherits="butikk" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
        <asp:Repeater ID="rprKategori" runat="server" DataSourceID="SqlDataSource_rprKategoriVarer">
        <ItemTemplate>
        <div id="Kategori_item">
        <table border="0" cellspacing="0" cellpadding="8">
          <tr>
            <td class="kategoribilde" rowspan="3"><asp:Image Width="95px" runat="server" ID="imgVare" ImageUrl='<%# Eval ("hovedbilde","bilder/{0}") %>' /></td>
            <td colspan="2"><h4><asp:Label ID="lblTittel" runat="server" Text='<%# Eval("overskrift") %>'></asp:Label></h4></td>
          </tr>
          <tr>
            <td colspan="2"><asp:Label ID="lblBeskrivelse" runat="server" Text='<%# Eval ("varebeskrivelse") %>'></asp:Label>
            <asp:HyperLink ImageUrl="grafikk/knapp_lesmer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx?Vare={0}") %>'></asp:HyperLink><br /><br /></td>
          </tr>
          <tr>
            <td class="kategorilink">Kr <asp:Label ID="lblPris" runat="server" Text='<%# Eval("pris","{0:N2}") %>'></asp:Label></td>
            <td></td>
          </tr>
        </table>
        <br />
        <br />
    </div>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <div id="Kategori_alternating">
        <table border="0" cellspacing="0" cellpadding="8">
          <tr>
            <td class="kategoribilde" rowspan="3"><asp:Image Width="95px" runat="server" ID="imgVare" ImageUrl='<%# Eval ("hovedbilde","bilder/{0}") %>' /></td>
            <td colspan="2"><h4><asp:Label ID="lblTittel" runat="server" Text='<%# Eval("overskrift") %>'></asp:Label></h4></td>
          </tr>
          <tr>
            <td colspan="2"><asp:Label ID="lblBeskrivelse" runat="server" Text='<%# Eval ("varebeskrivelse") %>'></asp:Label>
            <asp:HyperLink ImageUrl="grafikk/knapp_lesmer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx?Vare={0}") %>'></asp:HyperLink><br /><br /></td>
          </tr>
          <tr>
            <td class="kategorilink">Kr <asp:Label ID="lblPris" runat="server" Text='<%# Eval("pris","{0:N2}") %>'></asp:Label></td>
            <td></td>
          </tr>
        </table>
        <br />
        <br />
    </div>
    
    </AlternatingItemTemplate>
        </asp:Repeater>
        
</asp:Content>

Open in new window

0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21781984
Now I see the problem. The HyperLink is defined within another server control, so it is not accessible direclty from your code-behind. The Repeater control has an event handler called ItemCreated, and you will need to find the HyperLink in the event handler first, then add those lines afterwards:
private void rprKategori_ItemCreated(Object sender, System.Web.UI.WebControls.RepeaterItemEventArgs)
{
     if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
     {
           HyperLink hl = (HyperLink)e.Item.FindControl("lnkLesmer")
           hl.Attributes.Add("OnMouseOver", "this.firstChild.src='" + Request.ApplicationPath() +  "/Images/knapp_lesmer_over.png'");

           hl.Attributes.Add("OnMouseOut", "this.firstChild.src='" + Request.ApplicationPath() + "/Images/knapp_lesmer.png'");
     }

}
0
 

Author Comment

by:Raggdog
ID: 21782181
I feel very stupid; but what do you mean by 'find the HyperLink in the event handler first' ?

This private void rprKategori_ItemCreated... I shall add that to the .cs file, right?
Am I supposed to write the ' OnItemCreated = rprKategori_ItemCreated' in the repeater control ass well?

Correct me, please...
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21782257
this line will find the HyperLink in the event handler:
HyperLink hl = (HyperLink)e.Item.FindControl("lnkLesmer")

>>>This private void rprKategori_ItemCreated... I shall add that to the .cs file, right?
Right.

>>>Am I supposed to write the ' OnItemCreated = rprKategori_ItemCreated' in the repeater control ass well?
You got it right. :-)
0
 

Author Comment

by:Raggdog
ID: 21782381
Now I got the error: Compiler Error CS0118... I dont know what that means.

In my repeater I have an ItemTemplate, and an AlternatingItemTemplate. Both of them contains a hyperlink, and their ID=lnkLesmer. I know that an id is supposed to be unik, do you think that it's a problem that they have the same id? Just asking...
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21782397
Sigh...I have tested my code before I posted and everything is fine.
1. Did you copy and paste my code into your ItemCreated event handler?
2. Do you use Visual Studio 2005?
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21782461
>>>>Am I supposed to write the ' OnItemCreated = rprKategori_ItemCreated' in the repeater control ass well?
If you do this way, then remember to change the event handler's definition from "private" to "public". Otherwise, it will throw an error.
0
 

Author Comment

by:Raggdog
ID: 21782555
I really appreciate that you are helping me - I feel very lost

well yes, I did copy and past your code but I got an error from a missing identifier after "private void rprKategori_ItemCreated(Object sender, System.Web.UI.WebControls.RepeaterItemEventArgs)", so I added an 'e' at the end. Hope that was not a problem?

And yes I use Visual studio 2005.

This is my .cs

public partial class butikk : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
   
    private void rprKategori_ItemCreated(Object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
     if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
     {
           HyperLink hl = (HyperLink)e.Item.FindControl("lnkLesmer");
           hl.Attributes.Add("OnMouseOver", "this.firstChild.src='" + Request.ApplicationPath() +  "/grafikk/knapp_lesmer_over.png'");

           hl.Attributes.Add("OnMouseOut", "this.firstChild.src='" + Request.ApplicationPath() + "/grafikk/knapp_lesmer.png'");
     }

    }




}

and my repeater looks like this:

<asp:Repeater ID="rprKategori" OnItemCreated="rprKategori_ItemCreated" runat="server" DataSourceID="SqlDataSource_rprKategoriVarer">
        <ItemTemplate>
        <div id="Kategori_item">
        <table border="0" cellspacing="0" cellpadding="8">
          <tr>
            <td class="kategoribilde" rowspan="3"><asp:Image Width="95px" runat="server" ID="imgVare" ImageUrl='<%# Eval ("hovedbilde","bilder/{0}") %>' /></td>
            <td colspan="2"><h4><asp:Label ID="lblTittel" runat="server" Text='<%# Eval("overskrift") %>'></asp:Label></h4></td>
          </tr>
          <tr>
            <td colspan="2"><asp:Label ID="lblBeskrivelse" runat="server" Text='<%# Eval ("varebeskrivelse") %>'></asp:Label>
            <asp:HyperLink ImageUrl="grafikk/knapp_lesmer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx?Vare={0}") %>'></asp:HyperLink><br /><br /></td>
          </tr>
          <tr>
            <td class="kategorilink">Kr <asp:Label ID="lblPris" runat="server" Text='<%# Eval("pris","{0:N2}") %>'></asp:Label></td>
            <td></td>
          </tr>
        </table>
        <br />
        <br />
    </div>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <div id="Kategori_alternating">
        <table border="0" cellspacing="0" cellpadding="8">
          <tr>
            <td class="kategoribilde" rowspan="3"><asp:Image Width="95px" runat="server" ID="imgVare" ImageUrl='<%# Eval ("hovedbilde","bilder/{0}") %>' /></td>
            <td colspan="2"><h4><asp:Label ID="lblTittel" runat="server" Text='<%# Eval("overskrift") %>'></asp:Label></h4></td>
          </tr>
          <tr>
            <td colspan="2"><asp:Label ID="lblBeskrivelse" runat="server" Text='<%# Eval ("varebeskrivelse") %>'></asp:Label>
            <asp:HyperLink ImageUrl="grafikk/knapp_lesmer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx?Vare={0}") %>'></asp:HyperLink><br /><br /></td>
          </tr>
          <tr>
            <td class="kategorilink">Kr <asp:Label ID="lblPris" runat="server" Text='<%# Eval("pris","{0:N2}") %>'></asp:Label></td>
            <td></td>
          </tr>
        </table>
        <br />
        <br />
    </div>
    
    </AlternatingItemTemplate>
        </asp:Repeater>

Open in new window

0
 

Author Comment

by:Raggdog
ID: 21782586
I changed it to public, but it did not help.
0
 

Author Comment

by:Raggdog
ID: 21782634
You wrote:
>>>>If you do this way, then remember to change... about writing 'OnItemCreated = rprKategori_ItemCreated' directely in the code.

Is there another way?
I tried to doubleclick the repeater from designview, but then I got 'OnItemCommand="rprKategori_ItemCommand'
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21782644
Let's do this from scratch:
1. Remove the event handler block from your cs file because we are going to let Visual Studio create the event handler for us.
2. Remove "OnItemCreated = rprKategori_ItemCreated" from your Repeater control.
3. Switch to Design view of your page. High-light your Repeater control. In the Properties window, you will see a lighting bolt icon, and click the icon to display all event handlers that Repeater supports. Double-click ItemCreated event handler, and an ItemCreated event handler will be created automatically in your .cs file.
4. Copy and past the code into the event handler.
5. Run your application. It must work. :-)
0
 

Author Comment

by:Raggdog
ID: 21782803
Now I did exactely as you said, and it did not work!
I did't get public void or private void - but protected void


CS0118: System.Web.HttpRequest.ApplicationPath er en egenskap, men brukes som en metode

This is my error message. It's in norwegian, but says something like ....ApplicationPath is a quality, but are used as a method.
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 21782835
Did you follow the steps I posted in my last comment?

>>>ApplicationPath is a quality, but are used as a method.
Sorry, forgot you are using C#. Remove "()" after ApplicationPath. Should look like: Request.ApplicationPath, without "()".
0
 

Author Comment

by:Raggdog
ID: 21782903
You are a genious, and you have an angels patience I must say!!
It finally works. Thank you so much!!
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 21782937
Hurray!!! Glad it is working now. I am heading off home now. Have a great weekend.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help with Report Viewer in VS2013 6 29
C# LINQ query question 11 29
Subtract dates in vb.net 6 31
Convert a string to date 4 40
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question