We've created an Image Object, then used the object to modify the image you see below. We've made the image a link; it doesn't go anywhere, but we wanted to use the onMouseOver Event Handler, and you can't use that Event Handler on an image itself. When you point at the image the onMouseOver Event Handler runs the blink() function. Or when you click the button the onClick Event Handler runs blink(). This function makes the eye blink, by switching the image file used.

// Pre-load the Images
if (document.images) {
     eye1 = new Image();
     eye1.src = "images/eye-open.gif";

     eye2 = new Image();
     eye2.src = "images/eye-half.gif";

     eye3 = new Image();
     eye3.src = "images/eye-close.gif";
}

function blink() {
     // make sure that the Browser "understands" the Image Object
     // in other words that it is "Browser compatible"
     if (document.images) {
          // swap out eye-open.gif with eye-half.gif
          document.eye.src = eye2.src;

          // wait 100 milliseconds
          // then swap out eye-half.gif with eye-close.gif
          setTimeout("document.eye.src = eye3.src", 100);
          // wait another 100 milliseconds
          // then swap out eye-closed.gif with eye-half.gif
          setTimeout("document.eye.src = eye2.src", 200);
          // wait another 100 milliseconds
          // then swap out eye-half.gif with eye-open.gif
          setTimeout("document.eye.src = eye1.src", 300);
     }
}

</SCRIPT>

<A HREF="javascript:void(null)" onMouseOver="blink()">
     <IMG NAME="eye" SRC="images/eye-open.gif">
</A>

<FORM>
     <INPUT TYPE="button" VALUE=" Blink " onClick="blink()">
</FORM>