DreamweaverMX Tutorials

8. Javascript

8.2 a simple mouseover

A mouseover (also known as a rollover) is an effect commonly applied to navigation buttons. When the page loads, the button is in its default state. When the web visitor moves the mouse pointer over the button, it changes color/type.

To create a mouseover event, you need two images that have the same physical dimensions. We'll use the Dreamweaver Rollover Image dialog to create the javascript.
  1. Create a new HTML document
  2. Choose Insert > Interactive Images > Rollover Images
  3. In the Image Name box, enter the name of the rollover image. I make these human readable (thus I don't name them 1, 2, 3, etc. -- instead I give them a name that matches the navigation).

    mouseover dialog box
  4. In the Original Image box, enter the path of the default image (the one that loads when the page loads -- this is the "off" image)
  5. In the Rollover Image box, enter the path of the rollover image
  6. Check Preload Rollover Image to preload the images into the browser cache
  7. Create an alt(ernative) tag so that your code is accessible
  8. When clicked go to URL ... is whatever page your image should link to
  9. Click OK

exercise

  1. Download the cinnamon.gif and nutmeg.gif images to your hard drive (right-click and save-as)
  2. Define a new site (if there is no workshop site)
  3. Add a new folder called mouseover practice
  4. Add a sub-folder called images
  5. Move the images into the site images folder using the Site Panel.
  6. Now download this file by right-clicking this link and saving the file as "mouseover_practice.html"
  7. Move it into the site mouseover folder using the Site Panel.
  8. Insert a (gratuitous) rollover named spices; look at the code view to see the "insert image here" comment. The original image is the cinnamon.gif; the rollover image is the nutmeg.gif. For the link, use #
  9. Save the document and practice in the browser view. It should look like this file. Does the text "bounce" around? This is why images should have the same dimensions.
next previous PDF print home