BY:Dana A. Fillhart
DATE:1996-09-03
UPDATED:1996-10-15

NETSCAPE 3.0 REQUIRED

ImageSwitch for Netscape 3.0 (updated version 2)
-----------------------------------------------
COMMENTS 1996-10-15:
No more need for the client-side image maps at all. Wish I had realized onMouseOver/Out were available for the <A HREF> tag at the outset...would've made life a LOT nicer for me (and all who have tried this script). Special thanks to DJW41023@aol.com

If you've ever wanted to have an image switch to a new image when the user runs his mouse over it (and switch back when the mouse leaves it), then here's your script to do just that.

Instructions:
-------------

Step 1. The first <SCRIPT> above defines an array of image directories and names. Change each location in the first script's array to match the location of the images you wish to switch. Place the image that is to be switched AFTER the image that is regularly displayed. Always start your list of images in this array with zero, and always use the name "imag" when making this array in your own pages (because that's what the ImagSwitch "swtch" function uses). The example array on this page has four images--two pairs of images to be switched. You may add more pairs to switch, but for each pair you add, make sure you follow each step below, and in the first <SCRIPT> add 1 to the Array number for each new image. The ImageSwitch routine (in the second <SCRIPT>) knows where the array ends, so you don't have to fiddle with that at all.

Step 2. (You can skip this step) If you want to have this script as a separate library, *AND* your webserver (NOT YOUR BROWSER) is configured to handle the MIME type "application/x-javascript" for the .js extension, then take the entire code between the second set of <SCRIPT></SCRIPT> and cut it to the clipboard, then paste it into a separate file; call it "imageswitch.js" (you can call it anything you like, so long as it has the .js extension). Then, beside the LANGUAGE="JavaScript" in that second <SCRIPT> tag, add SRC="directory/of/file/imageswitch.js" (replacing that directory, obviously, with your own directory).

Step 3. Step 3: Place the following around the <IMG> tag: <A HREF="whateverdoc.html" onMouseOver="swtch(number2,name)" onMouseOut="swtch(number1,name)"></A> In our blahimage1.gif example above, you'd have (assuming it was the only image in the array to switch): <A HREF="whateverdoc.html" onMouseOver="swtch(1,BlahImage)" onMouseOut="swtch(0,BlahImage)"><IMG NAME="BlahImage" SRC="my/directory/of/images/blahimage1.gif" BORDER="0" WIDTH="50" HEIGHT="10"></A> Make sure you give each image you wish to switch a unique name. It is also very good habit to ensure that each image has HEIGHT and WIDTH attributes--sometimes NS will crash without these. Also, if you don't want to have the image linked to anywhere should the user click on it, just change the HREF to "#somewhere" and place <A NAME="somewhere"></A> right before it.

-------------
That's it! Seems like quite a bit of effort to switch an image, but this IS the easiest way I've seen (or done) to have multiple images switched in one document.

URL: http://www.oocities.org/SiliconValley/7116/jv_imgsw.html