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.
- Create a new HTML document
- Choose Insert > Interactive Images
> Rollover Images
- 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).
- 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)
- In the Rollover Image box, enter the path
of the rollover image
- Check Preload Rollover Image to preload the
images into the browser cache
- Create an alt(ernative) tag so that your code is accessible
- When clicked go to URL ... is whatever page your image
should link to
- Click OK
|