re-
VISION
PHOTOGRAPHY AND GRAPHICS BY JAY BOERSMA
|
 JavaScript MouseOver Image Changes |
|
|
This is one you see a lot. It is frequently used to create navigation buttons that recede or light up when the mouse moves over them:
First you need to create two images, one for the "on" state and the other for "off."
The href="javascript:;" part is a null link - meaning that it doesn't go anywhere or load any new content. It could be replaced with a functional link that would load a new page. Both images should be the same size.
light-off.jpeg
light-on.jpeg
<a href="javascript:;"
onmouseover="light.src='light-on.jpeg'"
onmouseout="light.src='light-off.jpeg'">
<img name="light" width=75 height=75 border=0 src="light-off.jpeg"></a>
(BTW, this also works with animated GIFs.)