Webwork
/
MouseOver Image Changes

By default, text links in Web pages look different from non-linking text - they are usually a different color and are underlined. Links also change appearance, usually color, when the cursor moves over them. And to really drive home the "this is a link" point, the cursor itself changes from an arrow cursor_arrow to a pointing finger cursor_finger when it encounters a link.

All of this is to emphasize how important links are in hypertext documents.

When designers start altering the default appearance of links, they have to be careful not to disrupt these conventions because viewers expect them. If you are styling text with CSS, you want to be sure not to make the text links indistinguishable from regular text. If you are using images to create links, it's good practice to incorporate a visual cue in the image that it is a clickable link.

One way to do this is with javascript.

Source:
<a href="your_destination_URL"
onmouseover="document.getElementById('light').src='light-on.jpeg'"
onmouseout="document.getElementById('light').src='light-off.jpeg'">

<img id="light" width=75 height=75 border=0 src="light-off.jpeg"></a>
Web page:

The simple script above is swapping light-on.jpeg for light-off.jpeg when the viewer mouses over the link and reversing the swap when the mouse is moved off of the link.

"Onmouseover" and "onmouseout" are JavaScript events which trigger a change in the src for the image named light.

This is a script that you see a lot. It is frequently used to create navigation buttons that recede or light up when the viewer mouses moves over them. The light bulb example above is based on two same-sized images:

Navigation Buttons

To revisit the Widgets are Us Web site, adding this script:

<a href="someURL"
onmouseover="document.getElementById('nav_about').src='nav_about_down.jpg'"
onmouseout="document.getElementById('nav_about').src='nav_about_up.jpg'"
onmousedown="document.getElementById('nav_about').src='nav_about_active.jpg'"
onmouseup="document.getElementById('nav_about').src='nav_about_down.jpg'">

and these three images for each navigation item:

nav_about_up
nav_about_down
nav_about_active

creates navigation buttons that look mechanically functional and reinforce the viewer's actions:

title
nav_about-up
nav_contact-up
nav_our-up
nav_shop-up
nav_wish-up
nav_sale-up
lower

The same idea applied to the "splatter" site:

video_r
photography_r
game_design_r
painting_r

Thanks to the ongoing evolution of CSS, the mouseover effects described above are now often done using "sprites." See Webwork p49.5sprites for information on how to use CSS sprites.

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma
light-on nav_about_active nav_about_down nav_contact_active nav_contact_down nav_our_active nav_our_down nav_sale_active nav_sale_down nav_shop_active nav_shop_down nav_wish_active nav_wish_down