1. Create two images that are of equal size and shape that vary in some aspect. (You can make a rollover out of any two images but for button purposes it's best to use a shape that is consistent.) Name the images "something” 1 and "something" 2 for later ease of use.

2. Create a folder in your iDisk>Web>Sites folder. Something like “Docs” Place the two images in the “Docs” folder.

3. Go to the page you want the rollover to appear.

4. Click "Insert" and then "HTML Snippet".

5. Paste the following code into the HTML Snippet dialogue box. 

The Code

1. <script type="text/javascript">
   

2. function mouseOver()
   

3. {
   

4. document.b1.src ="http://web.mac.com/iDiskname/Docs/number2.jpg"
   

5. }
   

6. function mouseOut()
   

7. {
   

8. document.b1.src ="http://web.mac.com/iDiskname/Docs/number1.jpg"
   

9. }
   

10. </script>
    

11. 
    

12. <a href="yoursite/yourpage" target="_blank">
    

13. <img border="0" alt="Artotems - Communication Matters!" src="http://web.mac.com/iDiskname/Docs/number1.jpg" name="b1"
    

14. 
    

15. width="114" height="82" onmouseover="mouseOver()" onmouseout="mouseOut()"
    

16. /></a>
    

6. Alter the text in Red. Image names, link site & page, alt Text

You can also remove the target"_blank" if you want the link to open in the current browser window.

7. Click “Apply”

8. Have Fun!