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. Keeping your buttons in a table will keep alignment correct, and makes a snazzy navigation button bar. You will probably want to put them in a div -- create the style information in your style sheet or in teh head of your document.

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','buttons/one_dn.jpg');" 
	onMouseOut="rollo('Button1','buttons/one_up.jpg');">
<img name="Button1" src="buttons/one_up.jpg" width="108" height="135" border="0">
</a>

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


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

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

</div>