The MouseOver

A mouseover can be used to make an image change when the user rolls their mouse over it. What actually happens is that the browser displays a different image when the mouse is over the text or image. Look at demo.html aga in to see how a rollover works. Here are two commercial websites with good examples of mouseovers:

http://www.saturn.com
http://www.audiusa.com (Choose a model, then select build your Audi)

To specify a mouse rollover you insert the onMouseOver and//or the onMouseOut attributes into the appropriate tag. These should be followed by the JavaScript code to be executed between quotes.

Making a simple MouseOver

Now that we’ve looke d at what a mouseover can do, let's make one. Included in the class files folder are the two pictures used to make the mouseover, harry.gif and family.gif. This mouseover will display a picture of Harry the pepper(the CIT mascot) until the mouse is moved over it; then it will display his family photo. The pictures will be part of a link to the CIT webpage.

1. Place the following code in the body of your HTML document:

<a href="http://www.cit.cornell.edu" onMouseOver="document.logo.src='family.gif ' ; " onMouseOut ="document.logo.src='harry.gif ' ; " > <img name="logo" src="harry.gif " border=0></a>

2. View your page with the browser. If the mouseover doesn’t work, be sure to check all semicolons, apostrophes, and quotation marks.

Here's how the code works. As you can see, all the code that creates the mouseover effect is contained in an anchor tag and is therefore a hyperlink. The name attribute of the image tag assigns a name to the image object. The result is that an object is created representing the image, this object is referred to by the variable named "logo" which is located inside the document object (it is a property of the document object). The onMouseOver and onMouseOut attributes are "Event Handlers" that tell the browser what code to execute when the events occur. You can make it so that the mouseover affects another image on the page by changing the name of the image accordingly in the event handler code.

Animated MouseOver

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.cit.cornell.edu/trainin g/" 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.