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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
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