1. Place the initial image (the image which will appear when the page loads initially) on your page
2. Right-Click (Control-Click if you´re on a Mac) on the image and select “Object HTML” from the pop-up menu that appears.
3. Click the “Before  Tag” tab in the “Object HTML” window, and type in the following code (this is the Rollover Definition Script) :

   <script language = "JavaScript"> <!-- Hide from non-JavaScript Browsers if (document.images){ button1 = new Image() button1.src = "../assets/images/picture1.gif" button2 = new Image() button2.src = "../assets/images/picture2.gif" } // --> </script>

   where picture1 and picture2 are the images you want to use for the initial and rollover pictures, respectively. Make sure the relative paths match the directory structure you will using to publish the site.
4. Click the “Inside  Tag” tab in the “Object HTML” window, and type in the following code (this is the Element Name Script):

   name = button

   (note: this tells your browser what the button you´re going to turn into a rollover button is called) then Click “OK”
5. Click on the “Link” button in the “Image Properties” window
6. select the link you wish to associate the button with - this will work for Internal, External, “Smart” and File links
7. Click on the “HTML” button in the bottom right corner of the “Link” window
8. Click on the “Inside Tag” tab of the “Object HTML” window that appears and type in the following code:

   onMouseOver = "if(document.images) { button.src = button2.src }" onMouseOut = "if(document.images) {button.src = button1.src}"

   (in this case, this entire block of text is typed in as one line - do not type in any carriage returns) and click “OK”

If you plan on having more than one Rollover button on your page, check out these additional notes.