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 to a pointing 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.
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:
To revisit the Widgets are Us Web site, adding this script:
and these three images for each navigation item:
creates navigation buttons that look mechanically functional and reinforce the viewer's actions:
The same idea applied to the "splatter" site:
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.