VC 237 :: Week 06 1 of 2 05 November 2008
— Online Lecture —
week::six
Image Rollovers
Introduction to Image Rollovers
What is a Rollover?
o A visual change that takes place when a user moves the cursor over a
designated area of a web page.
The user action is called a Mouse Over, which is what triggers the rollover.
Rollovers are created using JavaScript (and sometimes CSS), not HTML.
Why use them?
o Provide visual cues that signal to users that an area has special
meaning or is a navigation link.
o Also allows for the changing of visual content without reloading the page.
Why not use them?
o Can add unneeded technical and visual complexity to a page.
o JavaScript can be difficult to write and manage (though Dreamweaver
handles this for us).
Common treatments
o Change of color
o Graphic indicators (arrows, boxes, icons)
o Addition of a shadow or outer glow
o Flip other images (larger images, graphic indicators)
o Motion (primarily using Flash)
Less-effective treatments
o Changes in the face, style or size of text
Avoid plain-to-bold rollovers
o Size and pixel shifting
Can be visually distracting
The Rules of Rollovers
o First Rule of Rollovers :: The off state and on state of your rollover
images MUST be the same size in terms of pixels.
Make sure the pixel width and height of your images are exactly the same.
Rollovers can only swap an image; it cannot resize it.
o Second Rule of Rollovers :: Given Rule One, make sure the imagery
in your off and on states line up perfectly, pixel for pixel.
If the two images are off even by one pixel, a noticeable visual shift occurs.
Naming
o It's best to use a common naming system for all of your navigation images.
o Naming convention examples:
about_por_1.gif (off state)
about_por_2.gif (on state)
about_por.gif (off state)
about_por_over.gif (on state)
about_por_a.gif (off state)
about_por_b.gif (on state)
about_por_off.gif (off state)
about_por_on.gif (on state)
