How to Create a Rollover Image in Dreamweaver

01
of 06

What is a Rollover Image?

Shasta rollover image example
Shasta rollover image example. Photo © 2001-2012 J Kyrnin - image licensed to About.com

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 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

  1. Start Dreamweaver
  2. Open the web page where you want your rollover
02
of 06

Insert a Rollover Image Image Object

Insert Image Object
Insert Image Object. Screen shot by J Kyrnin

Dreamweaver makes it easy to create a rollover image.

  1. Go to the Insert menu and down to the “Image Objects” sub-menu.
  2. Select “Image rollover” or “Rollover image”

Some older versions of Dreamweaver call the Image Objects “Interactive Images” instead.

03
of 06

Tell Dreamweaver What Images to Use

Fill in the Wizard
Fill in the Wizard. Screen shot by J Kyrnin

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.

The next page shows the script that Dreamweaver writes.

04
of 06

Dreamweaver Writes the JavaScript for You

The JavaScript
The JavaScript. Screen shot by J Kyrnin

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()
05
of 06

Dreamweaver Adds the HTML for the Rollover

The HTML
The HTML. Screen shot by J Kyrnin

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)"
06
of 06

Test Out the Rollover

Shasta rollover image example
Shasta rollover image example. Photo © 2001-2012 J Kyrnin - image licensed to About.com

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

A rollover is a lot smoother than the GIF I created to illustrate it.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Create a Rollover Image in Dreamweaver." ThoughtCo, Mar. 1, 2017, thoughtco.com/rollover-image-in-dreamweaver-3467218. Kyrnin, Jennifer. (2017, March 1). 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 November 21, 2017).