Rollover images by CSS

Control an Image on rollover with CSS

[supahoopsa67]

I want to be able to change an image next to an HTMl href link when the user hovers over either the image or the text of the link.

At present I am having to use javascript to achive this as follows:

<a href="http://example.com/MAIN/findtrip.aspx" target="_blank" onmouseover="MouseOver(1);" onmouseout="MouseOver(0);">
<asp:Image ID="Image1" runat="server" imageurl="Images/Trip.gif" hspace=5 /><u>HRG Trip</u>
</a>

<script type="text/javascript">

function MouseOver( inout) {
obj = document.getElementById("<%=Image1.ClientID%>")
if (inout==0) {
obj.src="Images/Trip.gif"
} else {
obj.src="Images/TripRoll.gif"
}
}
</script>

I have tried to do this via CSS with the following styles:

.lnk1
{
width:15px;
background-image:url(../../Images/trip.gif);
}

.lnk1:hover
{
background-image:url(../../Images/tripRoll.gif);
}

But I cannot show the image correctly via CSS. If I use an asp:image it display's an "X" in the middle, if I use a label the image is displayed ove the text. I am sure that this must be possible with CSS, but being a real newbie to the world of CSS i am looking for some help guys!

[edited by: SuzyUK at 5:58 pm (utc) on Mar. 11, 2008]
[edit reason] changed to example.com [/edit]

[alias]

since you want to hover an anchor we won't need any JS - a:hover works on all browsers properly.

as for the styling - there are loads of ways to do it. this is how I would make it work:

.link1 {
background-image: url(path/to/the/image.jpg);
background-position: 0 50%; /* first value sets the image position on the x axis, second value sets the image position on the y axis. I usually center it, it's up to you. */
background-repeat: no-repeat;
padding: 0 0 0 20px; /* if I want the image to be on the left side of the link - here I prepare enough space for the image and the text on the right-hand side */
}
.link1:hover {
background-image: url(path/to/the/image_hover.jpg);
}

you can style it all any way you like it, css is rather flexible in this case.
hope it all makes sense.
please do not hesitate to ask anyways ;)

M.

[supahoopsa67]

Thanks for this, but what html control do I use for the image?

I was using
<asp:Image ID="Image1" runat="server" cssClass="link1" hspace=5 /><u>HRG Trip</u>

But this leaves a nasty "X" in the middle of the image where the imageURL should be. I have tried a label and a couple of other controls, but can't find anything that works OK.

[alias]

what do you mean by [em]html control[/em]?
in my case I am setting the image using css as the background. you can do it inline like this aswell:

<a href="some_link" class="link1" style="background-image:url(path/to/the/image.jpg">Link</a>

[supahoopsa67]

Just about perfect, however the image get's cropped to the height of the text in the link. I tried increasing the height and the font-size in the CSS file, but this didn't seem to make any difference?

.link1
{
height:25px; /* My image is only 15px high */
font-size:1em;
background-image: url(../../images/trip.gif);
background-position: 0 100%; /* first value sets the image position on the x axis, second value sets the image position on the y axis. I usually center it, it's up to you. */
background-repeat: no-repeat;
padding: 0 0 0 20px; /* if I want the image to be on the left side of the link - here I prepare enough space for the image and the text on the right-hand side */

}
.link1:hover {
background-image: url(../../images/tripRoll.gif);
}

[supahoopsa67]

Fixed it, I just increased the padding (top) to 2px and hey presto it's working.

MANY, MANY thanks for this

I am fast becoming a complete CSS convert!