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. Alternatively you can create a directory on a different server and place the images in that directory/folder and note the path to the images.

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!