Instructions (please read carefully)

For each button, you need to save the "ON" and "OFF" version of the image, copy the code that goes with that button and paste it where you want the button to go in your html document, and make sure both versions of the button are in the same folder as the html file you are working on. You will have to make one change to the code that you are copying. Where it says href="YOURLINK.HTML", change YOURLINK.HTML to the filename of the page you want the image to link to. You will have problems if the page you are linking to is not in the same folder as the image and html document you are working on (more advanced users may have more experience with more complex linking).

Save the images by right clicking on them and saving them into the proper directory (make sure it is the same directory in which you save the html file it is going into).

Copy the text by selecting all of the text and hitting Ctrl-C (Command-C for Mac).

Blue Crystal

"OFF" IMAGE	<a href="/oldsite/html/downloadables/labcoolstuff/mouseovers/YOURLINK.HTML" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('BlueCrystal','','/images/content/coolstuff/mouseovers/crystal01-over.gif',1)"><img src="/images/content/coolstuff/mouseovers/crystal01.gif" width="32" height="32" border="0" name="BlueCrystal"></a>
"ON" IMAGE

Red Crystal

"OFF" IMAGE	<a href="/oldsite/html/downloadables/labcoolstuff/mouseovers/YOURLINK.HTML" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RedCrystal','','/images/content/coolstuff/mouseovers/crystal02-over.gif',1)"><img src="/images/content/coolstuff/mouseovers/crystal02.gif" width="32" height="32" border="0" name="RedCrystal"></a>
"ON" IMAGE