How to Create a Rollover Image in Dreamweaver
What is a Rollover Image?
A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it. These are commonly used to create an interactive feel such as buttons or tabs. But you can create rollover images out of just about anything.
This tutorial is designed to help you create a rollover image in Dreamweaver. It is intended for use by people using the following versions of Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Requirements for this Tutorial
One of the versions listed above.
- An original image
Make sure to optimize this image. This will help your pages load more quickly.
- The rollover image
This image should be the same dimensions as the original image. And, like the original image, should be optimized to help page load times.
- A web page
This is the HTML page where you’ll put your rollover image.
- Start Dreamweaver
- Open the web page where you want your rollover
Insert a Rollover Image Image Object
Dreamweaver makes it easy to create a rollover image.
- Go to the Insert menu and down to the “Image Objects” sub-menu.
- Select “Image rollover” or “Rollover image”
Some older versions of Dreamweaver call the Image Objects “Interactive Images” instead.
Tell Dreamweaver What Images to Use
Dreamweaver pops a dialog box with the fields you need to fill in to create your rollover image.
- Image Name
Choose an image name that is unique for the page. It should be all one word, but you can use numbers, underscores (_) and hyphens (-). This will be used to identify the image to change.
- Original Image
This is the URL or location of the image that will start out on the page. You can use relative or absolute path URLs in this field. This should be an image that exists on your web server or that you’ll upload with the page.
- Rollover image
This is the image that will appear when you mouse over the image. Just like the original image, this can be an absolute or relative path to the image, and it should exist or be uploaded when you upload the page.
- Preload rollover image
This option is selected by default because it helps the rollover appear more quickly. By choosing to preload the rollover image, the Web browser will store it in a cache until the mouse rolls over it.
- Alternate text
Good alternate text makes your images more accessible. You should always use some type of alternate text when adding any images.
- When clicked, go to URL
Most people will click on an image when they see one on a page. So you should be in the habit of making them clickable. This option allows you to specify the page or URL to take the viewer to when they click on the image. But this option isn’t required to create a rollover.
When you’ve completed all the fields, click OK to have Dreamweaver create your rollover image.
4 of 6
function MM_swapImgRestore() function MM_findObj(n, d) function MM_swapImage() function MM_preloadImages()
If you chose to have Dreamweaver preload the rollover images, then you will see the HTML code in the body of your document to call the preload script so that your images load more quickly.
Dreamweaver also adds all the code for your image and links it (if you included a URL). The rollover portion is added to the anchor tag as onmouseover and onmouseout attributes.
Test Out the Rollover
A rollover is a lot smoother than the GIF I created to illustrate it.