-Back-

Mouse Over Effect

JavaScript

Date Added: May 19, 2003

Platforms: NS: all - IE: all

Author: Bryan Gamble (bryan@bmgamble.com)

Homepage: bmgamble.com

Description: Using simple javascript to make an effect, an image changes whenever a cursor is moved over it.

Example: To see how this script works, simply place your cursor over the image from the "Result". To copy the images, right click on the image and choose "Save Picture As" for both images. "test.gif" "MO_test.gif" Result:

The Code: Cut and paste this code by pressing "highlight all": <!---------------------BEGIN HEAD-------------------------> <!-- To install: --> <!-- Place this into the HEAD of the HTML document: --> <!-- Make sure all images are in the same folder as this--> <!-- file. --> <!-- DO NOT TAKE THE FOLLOWING OUT OF THE CODE: --> <!--------------------------------------------------------> <!-- AUTHOR: Bryan Gamble --> <!-- PROGRAM: Mouse Over © Copyright 2001 --> <!--------------------------------------------------------> <SCRIPT LANGUAGE="JavaScript1.1"> <!-- if (document.images) { image1on = new Image(); image1on.src = "test.gif"; image1off = new Image(); image1off.src = "MO_test.gif"; } function turnOn(imageName) { if (document.images) { document[imageName].src = eval(imageName + "on.src"); } } function turnOff(imageName) { if (document.images) { document[imageName].src = eval(imageName + "off.src"); } } //--> </SCRIPT> <!--------------------END HEAD-----------------------------> Cut and paste this code by pressing "highlight all": <!--------------------BEGIN BODY--------------------------> <!-- To install: --> <!-- Place this into the BODY of the HTML document: --> <IMG SRC="test.gif" X-CLARIS-USEIMAGEHEIGHT BORDER=0 name=image1 hspace=0 vspace=0 ALT="Pictures" onmouseover="turnOff('image1')"; onmouseout="turnOn('image1')"> <P><BR> <CENTER> <A HREF="http://www.bmgamble.com">Free Source Code</A> </CENTER> <!--------------------END BODY----------------------------->

Notes: First, you must create two separate images. I call the first image "test.gif" and the second, "MO_test.gif". Then I create two objects: "img1on" (MO_test.gif) and "img1off" (test.gif). When calling the function that switches the images, I pass it a variable according to the image number. Since it is the very first image, I pass it "0". If it were the second image, i would pass it a 1 and so on. If you would like to add more images, simply create more objects. . ."img2on", "img3on", and so on.

-Back-