JavaScript Rollovers:

By: Jeffrey Daverio '07

When it is working, the table project will be jazzed up by learning and applying something new called a javascript mouse rollover. Javascript is used to create interactivity and dynamic visual effects on webpages such as image rollovers. A typical rollover simply switches two images in the same place as your mouse rolls over the spot.

For each rollover in this exercise, you will need two images saved as appropriate file types. Each image will be named and placed in a folder. In your <td> tag or <th> tag, you will place the following.

<a href="link url"
onMouseover="document.rollover name.src='image url'"
onMouseout="document.rollover name.src='image url'">
<img src="image url" name="rollover name"></a>

As the web designer you are responsible for giving each rollover a unique name. A name that can easily be associated with the picture. It is recommended here to use all lowercase, without spaces and not re-use the name of your anchors

Fill in the appropriate bold letters with the information needed and (cross your fingers) your rollovers will work. Below an example of a simple rollover.

Simple Rollover

-Back to Webdesign-