Raggdog
asked on
How to make mouse-over on hyperlink with image url
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_les mer.png" ID="lnkLesmer" runat="server" Text="Les mer" NavigateUrl='<%# Eval ("VareID","varedetalj.aspx ?Vare={0}" ) %>'></asp:HyperLink>
Thank you
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_les
Thank you
What exact effect do you need?
ASKER
I want the image to switch to another
ASKER
I want the image to switch to "images/knapp_lesmer_over. png" on mouse-over...
Is this doooable?
Is this doooable?
Here you go:
http://ecybers.com/webdesign/javascriptonmouse.htm
Let me know if you have trouble undertand or implement this JavaScript example.
http://ecybers.com/webdesign/javascriptonmouse.htm
Let me know if you have trouble undertand or implement this JavaScript example.
ASKER
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?
This exampel is for a href?
OK, in your Page_Load event handler, add this line:
this.lnkLesmer.Attributes. Add("OnMou seOver", "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("OnMou seOut", "this.firstChild.src='" & origianlImagePath & "'");
this.lnkLesmer.Attributes.
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.
ASKER
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
This is very new to me - sorry...
Thank you
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("OnMou seOver", "this.firstChild.src='" + Request.ApplicationPath() +
"/Images/knapp_lesmer_over .png'");
this.lnkLesmer.Attributes. Add("OnMou seOut", "this.firstChild.src='" + Request.ApplicationPath() +
"/Images/knapp_lesmer.png' ");
this.lnkLesmer.Attributes.
"/Images/knapp_lesmer_over
this.lnkLesmer.Attributes.
"/Images/knapp_lesmer.png'
ASKER
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?
Compiler Error CS0117
butikk does not contain a definition for 'lnkLesmer'
Am I missing something?
'lnkLesmer' is your HyperLink's ID. I copied it from your example code.
ASKER
Yes I know, and I have double checked it and that is correct.
Why does I get this error then?
Why does I get this error then?
Where did you put those two lines? Post your code please, including your aspx page.
ASKER
Here is the hole mess...:)
Thank you again
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>
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(Ob ject sender, System.Web.UI.WebControls. RepeaterIt emEventArg s)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemT ype.Altern atingItem)
{
HyperLink hl = (HyperLink)e.Item.FindCont rol("lnkLe smer")
hl.Attributes.Add("OnMouse Over", "this.firstChild.src='" + Request.ApplicationPath() + "/Images/knapp_lesmer_over .png'");
hl.Attributes.Add("OnMouse Out", "this.firstChild.src='" + Request.ApplicationPath() + "/Images/knapp_lesmer.png' ");
}
}
private void rprKategori_ItemCreated(Ob
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemT
{
HyperLink hl = (HyperLink)e.Item.FindCont
hl.Attributes.Add("OnMouse
hl.Attributes.Add("OnMouse
}
}
ASKER
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...
This private void rprKategori_ItemCreated...
Am I supposed to write the ' OnItemCreated = rprKategori_ItemCreated' in the repeater control ass well?
Correct me, please...
this line will find the HyperLink in the event handler:
HyperLink hl = (HyperLink)e.Item.FindCont rol("lnkLe smer")
>>>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. :-)
HyperLink hl = (HyperLink)e.Item.FindCont
>>>This private void rprKategori_ItemCreated...
Right.
>>>Am I supposed to write the ' OnItemCreated = rprKategori_ItemCreated' in the repeater control ass well?
You got it right. :-)
ASKER
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...
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...
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?
1. Did you copy and paste my code into your ItemCreated event handler?
2. Do you use Visual Studio 2005?
>>>>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.
If you do this way, then remember to change the event handler's definition from "private" to "public". Otherwise, it will throw an error.
ASKER
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(Ob ject sender, System.Web.UI.WebControls. RepeaterIt emEventArg s)", 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(Ob ject sender, System.Web.UI.WebControls. RepeaterIt emEventArg s e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemT ype.Altern atingItem)
{
HyperLink hl = (HyperLink)e.Item.FindCont rol("lnkLe smer");
hl.Attributes.Add("OnMouse Over", "this.firstChild.src='" + Request.ApplicationPath() + "/grafikk/knapp_lesmer_ove r.png'");
hl.Attributes.Add("OnMouse Out", "this.firstChild.src='" + Request.ApplicationPath() + "/grafikk/knapp_lesmer.png '");
}
}
}
and my repeater looks like this:
well yes, I did copy and past your code but I got an error from a missing identifier after "private void rprKategori_ItemCreated(Ob
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(Ob
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType==ListItemT
{
HyperLink hl = (HyperLink)e.Item.FindCont
hl.Attributes.Add("OnMouse
hl.Attributes.Add("OnMouse
}
}
}
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>
ASKER
I changed it to public, but it did not help.
ASKER
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="rprKategor i_ItemComm and'
>>>>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="rprKategor
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. :-)
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. :-)
ASKER
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.App licationPa th 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.
I did't get public void or private void - but protected void
CS0118: System.Web.HttpRequest.App
This is my error message. It's in norwegian, but says something like ....ApplicationPath is a quality, but are used as a method.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You are a genious, and you have an angels patience I must say!!
It finally works. Thank you so much!!
It finally works. Thank you so much!!
Hurray!!! Glad it is working now. I am heading off home now. Have a great weekend.