How to Create a Rollover Image in Dreamweaver

Rollover images — Thes duplicate images can be used as rollovers.
pk74 / Getty images

By

Updated on July 24, 2019

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

Dreamweaver
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 of 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.

Get Started

Lifewire / J Kyrnin

Start Dreamweaver
Open the web page where you want your rollover

Insert a Rollover 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.

Dreamweaver Writes the JavaScript for You

If you open up the page in code-view you’ll see that Dreamweaver inserts a block of JavaScript in the <head> of your HTML document. This block includes the 3 functions you need to have the images swap when the mouse rolls over them and the preload function if you opted for that.

function MM_swapImgRestore()
function MM_findObj(n, d)
function MM_swapImage()
function MM_preloadImages()

Dreamweaver Adds the HTML for the Rollover

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.

onload="MM_preloadImages('shasta2.jpg')"

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.

onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image1','','shasta1.jpg',1)"

Test Out the Rollover

Lifewire / J Kyrnin

See the fully functional rollover image and learn what’s on Shasta's mind.

Format

mla apa chicago

Your Citation

Kyrnin, Jennifer. "How to Create a Rollover Image in Dreamweaver." ThoughtCo, Sep. 3, 2021, thoughtco.com/rollover-image-in-dreamweaver-3467218. Kyrnin, Jennifer. (2021, September 3). How to Create a Rollover Image in Dreamweaver. Retrieved from https://www.thoughtco.com/rollover-image-in-dreamweaver-3467218 Kyrnin, Jennifer. "How to Create a Rollover Image in Dreamweaver." ThoughtCo. https://www.thoughtco.com/rollover-image-in-dreamweaver-3467218 (accessed June 5, 2023).