i require a source for when i hover over an image it changes to another image!!

[mathew_1989]

hi im trying to design a web page for my uni project in this web page i have thumbnail imges what i would like to achieve is that when i hover over an image with my mouse another image appears an over rights the previous image. if i was to go over the imge again then the image would change to nother image and over write the previous image and if i was to go over the image again then the image would go back to the first image. so its like images layerd behind each other. would ene1 knw how to do this thnx mathew.

[Nick]

You want to use what is called a rollover.

http://www.google.com/search?hl=en&q...earch&aq=f&oq=

The basics would be this:

<img src="image1.gif" onMouseOver="this.src='image2.gif'" onMouseOut="this.src='image1.gif'" />

You may have to add a "return false;" after the src change, i'm not sure, I haven't done this in a while. Just read over one of those tutorials linked above and it will explain.

[mathew_1989]

hi thnx 4 dis. the images do rollover but then the third image rolls over when i move my mouse of the second image what i would like is dat the second image stays when i move my mouse of it and then when i put my mouse over the image again then it changes to the third image. i think i have to use the return false code but i dnt knw wher i would add it in my source. fnx mathew

[Nick]

To clarify - when you rollover imageX the first time, it changes to imageY, and stays that way even when you roll off? And then when you rollover it the next time, it changes to imageZ, and stays on imageZ even when you roll of? Is this correct?

[mathew_1989]

yes this is correct nd if i was to rollover imageZ it would go bak to imageX and keep going in that circle (LOOP). thnx