Rollover Images
Home → Tutorials → Rollover Images
Images that change on rollover are pretty nifty. Here's an example:
First, place this code where you'd like it to go:
<img src="FIRST IMAGE URL" border="0" onmouseover="this.src = 'ROLLOVER IMAGE URL'" onmouseout="this.src = 'MOUSEOUT (FIRST IMAGE) URL'" />
Simply replace 'first image URL' with the image you want to first appear. Then replace 'rollover image URL' with the image you'd like to appear on rollover. For the 'mouseout (first image) URL,' replace it with the image you'd like to appear after the mouse has left the area of the image. If that means you'd like the image to return to normal, simply replace this with the first image's URL.
That's it! Have fun with your new rollover images. If you still have lingering questions, feel free to contact me.