Question about image links

On Mouse Over

[Mr_Brutal]

Hi all,

I have a few links where i want to use a small gif image next to some text as the link. My hover effect changes the text colour and by sticking an image between the <a> tags the gif is also clickable. To complete the effect i wanted to swap the image with its duplicate in a different colour matching the text. I know theres loads of ways to do rollovers but i wanted to keep it REAL simple and so am using this.

<img src="one.gif" onmouseover="src='two.gif'" onmouseout="src='sfx/purchase.gif'" border="0">

So when i mouseover the image the image and text change colour but when i mouse over the text only the text changes. I know why its not working, and that CSS only allows hover on <a> so I can't use CSS for the image is there any way of doing this without resorting to Button images that include the text?

Thanks

[garann]

It appears from your code that you want to show a third image when the user mouses off the link, but your question seems to be about a standard mouseover. Does this work for you?

/* CSS */
a#myLink { 
 color: #00f;
 background: url(one.gif) no-repeat left top;
 padding-left: 100px; /* width of one.gif */
}
a#myLink:hover {
 color: #f00;
 background: url(two.gif) no-repeat left top;
 padding-left: 100px; /* width of two.gif */
}
...
<!-- HTML -->
<a id="myLink" href="nextPage.htm">Click here!</a>

FYI:

CSS only allows hover on <a>

That's not quite accurate. CSS allows :hover on any element you want to attach it to. Internet Explorer only allows :hover on <a>.

[Mr_Brutal]

Thanks garann,

Thats exactly what i wanted and i stand corrected about <a> hover and IE.

I only use two images and so it works perfectly!