Image Rollovers with the Hyperlink Control

[Nathan Sokalski]

I have several System.Web.UI.WebControls.HyperLink Controls which I want to
display as rollover images. I know how to make these manually using the <a>
and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control
or a HyperLink and Image Controls, but the onMouseOver and onMouseOut
attributes must be in the <img> tag. If I were to use the HyperLink's
ImageUrl property and add the attributes using the
HyperLink.Attributes.Add() method, I am assuming the attributes will appear
in the generated <a> tag. Is there a way to create a Hyperlink Rollover
without creating two Controls? Thanks.

 

[Kris]

Hi Nathan,

Yes. You need not create two controls.

In HyperLink you have a property called ImageUrl. Use this property to
assign the image location.

Cheers,
Kris

 

[Ken Tucker [MVP]]

Hi,

I usually use the 2 controls. I try and make the image have a
transparent background. That way when the mouse passes over the hyperlink
the color changes and I dont have to change the image.

The new asp.net 2.0 menu control does a lot of what you are looking
for but I dont know if it work in your application.

Ken

 

[Patrick.O.Ige]

Nathan i remember i posted something similar too as i had to fix it up for a
client and you made some sugesstions.
What i did was supposeing you have an hyperlink and and image control like
below in a repaeater etc..

<asp:Image id="Image1" runat="server" name="Image1"
ImageUrl="images/off.gif"></asp:Image>
<asp:HyperLink Tooltip='<%#
DataBinder.Eval(Container.DataItem, "sample") %>'
Cssclass="txtmenu" id="HyperLink1" runat="server" />

You can add the image on mouseover by adding this in your ItemDataBound like
below

If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType =
ListItemType.AlternatingItem Then
Dim hyperLink As HyperLink =
CType(e.Item.FindControl("HyperLink1"), HyperLink)
Dim Image As System.Web.UI.WebControls.Image =
CType(e.Item.FindControl("Image1"), System.Web.UI.WebControls.Image)

hyperLink.Attributes.Add("onMouseOver", Image.ClientID &
".src='images/on.gif;return true;")
hyperLink.Attributes.Add("onMouseOut", Image.ClientID &
".src='images/off.gif'; return true;")

End If

And that did the trick..
Hope that helps
** If you need more info let me know.
Patrick

 

[Darren Kopp]

Ever thought about making a custom control? I know I made one to make
a link button with an image, inheriting from the link button class. It
wouldn't be too hard to do that with the hyperlink class and just have
properties linkimage and hoverimage. then you create a javascript to
swap the images. In your control you could then check if the script
has been registered, if not register it with the page. This way you
can use the same script with as many controls as you want.

This can help encapsulate your code a little better and maybe make your
life a bit easier

HTH,
Darren Kopp
http://blog.secudocs.com

 

[Nathan Sokalski]

I have thought about that, and someday I probably will, but right now I do
not have enough experience with making custom controls Design View friendly
that I want to do that with this. I have written custom controls in the
past, but am still studying and learning how to make their properties
visible in the places I want (such as the properties palette). Almost
everything I know about ASP.NET has been either self-taught from
books/websites or learned from people in newsgroups, none of the
universities I have attended seem to be big on .NET (if at all) yet.

 

[Nathan Sokalski]

You seem to have misunderstood my problem. I know how to assign an image to
a HyperLink, but I need to make that image a rollover, and I want to use
only one Control.

 

[Nathan Sokalski]

The code you give adds the onMouseOver and onMouseOut to the <a> tag, not
the <img> tag. Because of this, the rollover does not work.

 

[Patrick.O.Ige]

Nathan if you are interested in the img
Try loooking at :-
http://aspnet.4guysfromrolla.com/articles/091703-1.aspx
or
http://aspalliance.com/317
Hope that helps
Patrick