Dreamweaver

Create a rollover image

You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.

You must have two images to create the rollover: a primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver resizes the second image to match the properties of the first image.

Rollover images are automatically set to respond to the onMouseOver event. You can set an image to respond to a different event (for example, a mouse click) or change a rollover image.

For a tutorial on creating rollovers, see www.adobe.com/go/vid0159.

  1. In the Document window, place the insertion point where you want the rollover to appear.
  2. Insert the rollover using one of these methods:

    • In the Common category of the Insert bar, click the Images button and select the Rollover Image icon. With the Rollover Image icon displayed in the Insert bar, you can drag the icon to the Document window.

    • Select Insert > Image Objects > Rollover Image.

  3. Set the options and click OK.
    Image Name
    The name of the rollover image.

    Original image
    The image you want to display when the page loads. Enter the path in the text box, or click Browse and select the image.

    Rollover Image
    The image you want to display when the pointer rolls over the original image. Enter the path or click Browse to select the image.

    Preload Rollover Image
    Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer over the image.

    Alternate Text
    (Optional) Text to describe the image for viewers using a text-only browser.

    When Clicked Go to URL
    The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file.

    Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
  4. Select File > Preview in Browser or press F12.
  5. In the browser, move the pointer over the original image to see the rollover image.
    Note: You cannot see the effect of a rollover image in Design view.