We saw that a MouseOver can be used to change the image displayed when the mouse rolls over an image. This has an interesting application in animated images. Let’s say we have two versions of a GIF image, one of which is a still and one of which is animated. We can use a MouseOver to animate a still image when the mouse rolls over it. In your class files folder you have two images, logoscroll.gif and logostill.gif which can be used to create this effect.
1. Place the following code in the body of your HTML document:
<center>
<a href=http://www.computereducationworld.com
onMouseOver=”document.ttslogo.src=’logoscroll.gif’ ;”
onMouseOut=”document.ttslogo.src=’logostill.gif’ ;”>
<img src=”logostill.gif” name=”ttslogo” border=”0″>
</a>
</center>
2. View your page with the browser. If the mouseover doesn’t work, be sure to check all
semicolons, apostrophes, and quotation marks.
We have created a link to the TTS website using the logostill.gif image. We added mouse event handlers to the anchor tag; These change the image source file to logoscroll.gif when the mouse rolls over the image, and change it back to logostill.gif when the mouse leaves the image.