1. Technology

How to Create a Rollover Image in Dreamweaver


1 of 6

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

©2014 About.com. All rights reserved.