/*------------------------------------------------------------------------ FC-ImageRoll v1.0 Author: Mike Frazer for Frazer Creations Description: This was my first JavaScript effort, and its simplicity is what makes it such a great script. Blank lines not included, the function that actually changes the images is only 5 lines of code, but is entirely reusable! Installing it is a snap, too, and you have a great deal of flexibility with it. INSTALLATION: Step 1: Place the following code between the ... tags: Step 2: Image flips are usually used in graphical navigation menus. We'll use that for our example. Use code similar to the following for navigational menus, or adapt it to your particular purpose (it works best if you place it all on one line):

What that means: Lets start with what the script is built to work with - the image. The image is called using the following portion of the above code:

What that says is, "use the image named 'sample1.gif', and give it the name 'sample'. Don't place a border around the image." The other part of the above code is the hyperlink: This code uses two of the most commonly-used events that are built in to the JavaScript engine, 'onMouseOver' and 'onMouseOut'. The first, 'onMouseOver', is called when you place the mouse cursor over the image. The second, 'onMouseOut', is triggered when you move the cursor OFF of the image, or 'out' of the image's defined space. The 'onMouseOver' event, in this case, calls the function that flips an image. You'll notice that there are 2 items in the parentheses that follow the 'FlipImg' name. These are called 'arguments', and are required for the function to work - leave one out and you will get an error. The first is the name that you gave the image in the tag, in this case 'sample'. The second is the name of the image as defined in the code below, inside the 'if (document.images)' bracket. You generally define 2 images for a standard flip, and it's best to give them the same name with a number to make them unique (you'll see below that we named our samples 'sample1' and 'sample2'.) Each sample is actually a variable, declared in the script as [name] = new Image; where [name] is the name you want to give the image. Then you assign an actual image to the variable, like: [name].src = "[image filename]"; Be sure to include the file's extension when declaring an image. The true beauty to this simple function is that it allows you to do multiple image flips (as many as you want) on a single 'onMouseOver'. All you have to do is use multiple calls to the 'FlipImg' function, separating them inside the onMouseOver"..." with semicolons (';'): onMouseOver="FlipImg('1', 'img1a'); flipImg('2', 'img2a')" Thats it! You've now installed the script and learned both how AND why it works! Š1999-2001 Mike Frazer, Frazer Creations. Send comments and suggestions to mike@mikes-corner.com ------------------------------------------------------------------------*/ /* Preload images into their respective variables */ if (document.images) { a01 = new Image; a02 = new Image; a03 = new Image; a04 = new Image; a05 = new Image; a06 = new Image; a07 = new Image; a08 = new Image; a09 = new Image; a10 = new Image; a11 = new Image; a12 = new Image; a13 = new Image; a14 = new Image; a15 = new Image; a16 = new Image; a17 = new Image; a18 = new Image; a19 = new Image; a20 = new Image; a21 = new Image; a22 = new Image; a23 = new Image; a24 = new Image; a25 = new Image; a26 = new Image; a27 = new Image; a28 = new Image; a29 = new Image; a30 = new Image; a31 = new Image; a32 = new Image; a33 = new Image; a34 = new Image; a35 = new Image; a36 = new Image; a37 = new Image; a38 = new Image; a39 = new Image; a40 = new Image; a41 = new Image; a42 = new Image; a43 = new Image; a44 = new Image; a45 = new Image; a46 = new Image; a47 = new Image; a48 = new Image; a49 = new Image; a50 = new Image; a01.src = "images/button_01.png"; a02.src = "images/button_01_roll.png"; a03.src = "images/button_02.png"; a04.src = "images/button_02_roll.png"; a05.src = "images/button_03.png"; a06.src = "images/button_03_roll.png"; a07.src = "images/button_04.png"; a08.src = "images/button_04_roll.png"; a09.src = "images/button_05.png"; a10.src = "images/button_05_roll.png"; a11.src = "images/button_06.gif"; a12.src = "images/button_06_roll.gif"; a13.src = "images/button_07.gif"; a14.src = "images/button_07_roll.gif"; a15.src = "images/button_08.gif"; a16.src = "images/button_08_roll.gif"; a17.src = "images/button_09.gif"; a18.src = "images/button_09_roll.gif"; a19.src = "images/button_10.gif"; a20.src = "images/button_10_roll.gif"; a21.src = "images/button_11.gif"; a22.src = "images/button_11_roll.gif"; a23.src = "images/button_12.gif"; a24.src = "images/button_12_roll.gif"; a25.src = "images/button_13.gif"; a26.src = "images/button_13_roll.gif"; a27.src = "images/button_14.gif"; a28.src = "images/button_14_roll.gif"; a29.src = "images/button_15.gif"; a30.src = "images/button_15_roll.gif"; a31.src = "images/button_16.gif"; a32.src = "images/button_16_roll.gif"; a33.src = "images/button_17.gif"; a34.src = "images/button_17_roll.gif"; a35.src = "images/button_18.gif"; a36.src = "images/button_18_roll.gif"; a37.src = "images/button_19.gif"; a38.src = "images/button_19_roll.gif"; a39.src = "images/button_20.gif"; a40.src = "images/button_20_roll.gif"; a41.src = "images/button_21.gif"; a42.src = "images/button_21_roll.gif"; a43.src = "images/button_22.gif"; a44.src = "images/button_22_roll.gif"; a45.src = "images/button_23.gif"; a46.src = "images/button_23_roll.gif"; a47.src = "images/button_24.gif"; a48.src = "images/button_24_roll.gif"; a49.src = "images/button_25.gif"; a50.src = "images/button_25_roll.gif"; } /* This is the function that flips the images. You'll never find a more simple Javascript anywhere! */ function flipImg(field, imgName) { if (document.images) { document[field].src = eval(imgName + ".src"); } }