-
Step 1
Create an image in Photoshop that will serve as the default or "up" image for the rollover. Use the .JPG or .GIF file format, as these are the most common file formats.
-
Step 2
Save this image to the root folder of the website on which it will appear. The root folder is where all web pages and elements on those pages that make up a site are saved. Every website has one root folder.
-
Step 3
Create another image using the same dimensions as the first image. This second image, the "down" image, should differ from the first image.
-
Step 4
Save the second image into the root folder of the website on which it will appear. Use the same file name as the first image, but add "_down" to the end of the file name. This naming convention makes it easier to tell the two images apart when viewing them in a web-design program.
-
Step 5
In Dreamweaver, open the web page on which the button will go.
-
Step 6
Place the cursor on the page in the place where the button will go.
-
Step 7
Select the insert rollover image icon from the "Common" tab on the Insert Bar at the top of the screen.
-
Step 8
In the window that opens, type the name of your image in the "Name" blank.
-
Step 9
Click the browse button by the "Original Image" blank and select the "up" image from the root folder.
-
Step 10
Click the browse button by the "Rollover Image" blank and select the "down" image from the root folder.
-
Step 11
Click the browse button by the "When clicked go to URL" blank, and select the web page the button will link to. If the button will link to a page not on in your existing website's root folder, then type the URL in the blank.
-
Step 12
Click the preview browser button at the top of the HTML document and look at the page in a web browser.
-
Step 13
Click on the button with a mouse. The "down" image should appear when clicked and the link to the page the button links to should open.
-
Step 14
Save the web page.
