MouseOver Demonstration
Here is a mouseover demo with 4 states; an initial state, a mouseover, a mousedown, a mouseout.
Here is the pertinent code. In the head we pre-define the images for each state.
<html><head>
<title>Javascript Mouseover Demonstration</title>
<script language="JavaScript">
<!--
if (document.images) {
var imgover = new Image();
imgover.src = "c21.jpg";
var imgdown = new Image();
imgdown.src = "c16.jpg";
var imgout = new Image();
imgout.src = "c9.jpg"; }
//
</script>
<a href="collect.htm"
onMouseOver="document.rollimage.src=imgover.src"
onMouseDown="document.rollimage.src=imgdown.src"
onMouseOut ="document.rollimage.src=imgout.src">
<img name="rollimage" src="c18.jpg"
width=96 height=64></a>
<a href="javascript:(void)">
In the body, where we position the initial state of the image, we specify the events.
If you do not want a real link you can use a javascript null action instead:
See an article for a good explanation of a similar rollover approach.
A Webreference article shows how rollover techniques have developed and even how to use CSS2 to create rollovers without images. See our example with changing background images on rollover.
