Previous Example-|-Next Chapter's Examples-|-Return to Chapter Listing

Example 15.22:
Using the Image Object

[This example works with Netscape Navigator 3. It will not work properly with Internet Explorer 3.]

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.


We have this script in the HEAD: <SCRIPT LANGUAGE="Javascript"> <!-- var eye1 = new Image() eye1.src = "eye-open.gif" var eye2 = new Image() eye2.src = "eye-half.gif" var eye3 = new Image() eye3.src = "eye-clos.gif" function blink() { document.eye.src = eye2.src setTimeout("document.eye.src = eye3.src", 100) setTimeout("document.eye.src = eye2.src", 200) setTimeout("document.eye.src = eye1.src", 300) } //--> </SCRIPT> Then this in the BODY: <A HREF="javascript:void(null)" onmouseover="blink()"><IMG name="eye" src="eye-open.gif"></a> <P> <FORM> <INPUT type="button" value=" Blink " onclick="blink()"> </FORM>
Previous Example-|-Next Chapter's Examples-|-Return to Chapter Listing