<< .. Extra Credit Exercise : Demo A : Rollovers : PopUp Window : DropDown Menu : Slideshow1 : Slideshow2 : All Class Demos .. >>

Javascript Body Code for Rollovers

You will need to change the NAME and SIZE of the graphics to the correct values of YOUR graphics, and you'll need to change the link names, all in red. You will probably want to put the buttons in a div to keep the alignment correct. Create the style information in your style sheet or in the head of your document.

Be sure to note that you start with the hover or down state of your button. The code reads on Mouse over - which would indicate the hover state.

The next button placement calls for the normal state of the button - asking for on Mouse out -- so you return to the non-active state (up button)

The last button placement is actually a hot link or image link like we used in Exercise 3. You use the non-active state or up button as I call it.

To install this script:

Cut and paste this script into the BODY of your document:

<div id="nav_buttons">

<!-- This is the start of the javascript code for the buttons -->

<a href="link1.html" onMouseOver="rollo('Button1','images/one_hover.jpg');" 
	onMouseOut="rollo('Button1','images/one_link.jpg');">
<img name="Button1" src="images/one_link.jpg" width="108" height="135" border="0">
</a>

<a href="link2.html"  onMouseOver="rollo('Button2','images/two_hover.jpg');"  
	onMouseOut="rollo('Button2','images/two_link.jpg');">
<img name="Button2" src="images/two_link.jpg" width="108" height="135" border="0">
</a>


<a href="link3.html"  onMouseOver="rollo('Button3','images/three_hover.jpg');"  
	onMouseOut="rollo('Button3','images/three_link.jpg');">
<img name="Button3" src="images/three_link.jpg" width="108" height="135" border="0">
</a>

<!-- end of the javascript code for buttons -->

</div>