[thelist] JS Rollover (Rover...good boy) Script....

With all the talk of roll overs - I'd thought I'd post a nifty script
that I use for my rollovers. It works with IE (4,5) and NS (3,4). BTW -
I didn't write this, don't shoot the messenger. ;-)

(Yes Martin, I'll post this on the evolt site too. LOL)

+++++++++++++++++++

All-In-One Simple Rollover JavaScript....

<!-- (Hope fully I won't screw up to many HTML Email clients ;-)

Put the following in between the header tags...

<SCRIPT>
<!--
// Handles rollover images for NN3+ and IE4+
var loaded = new Array();

function F_loadRollover(image,imageName) {
	if (image && image.src &&
		(null == image.out || typeof(image.out) == typeof(void(0)))) {
		s = image.src;
		image.out = new Image();
		image.out.src = s;
		image.over = new Image();
		if (imageName.lastIndexOf('/') >= 0 || imageName.lastIndexOf('\\') >=
0) {
			s = imageName;
		} else {
			i = s.lastIndexOf('/');
			if (i<0) i = s.lastIndexOf('\\');
			if (i<0) { s = imageName; }
			else	 { s = s.substring(0,i+1) + imageName; }
		}
		image.over.src = s;
		loaded[image.name] = image;
	}
}
function F_roll(imageName,over) {
	if (document.images) {
	if (over) { imageObject = "over"; }
	else	  { imageObject = "out"; }
	image = loaded[imageName];
	if (image) {
		ref = eval("image."+imageObject);
		if (ref) image.src = eval("image."+imageObject+".src");
	}
	if (window.event)
		window.event.cancelBubble = true;
	}
}
//-->
</SCRIPT>

To implement....Here's an example URL and Image Tag:


<A HREF="/www/path/to/page.html" onMouseOver="F_roll('ImageName',1)"
onMouseOut="F_roll('ImageName',0)">
<IMG NAME="ImageName" SRC="/www/path/to/imageLO.gif"
onLoad="F_loadRollover(this,'/www/path/to/imageHI.gif')" BORDER=0
ALT="Home"></A>


Don't touch the JavaScript itself, it's written to be self contained.
There should be nothing you have to do there. All the work is setting up
the URL and IMAGE tags.

1 - Change the HREF to equal your target URL or script. Use relative or
hard links, script does not care.

2 - Change ALL references to ImageName to a name for your "pair" of
Images that are used for the rollover. This is the key to the script.
Important Note: You must use a unique name for each pair of images.
There are three places the name needs to be synchronized.

3 - Replace /www/path/to/imageLO.gif with the path and name of the
primary image. Use relative or hard links, script does not care.

(The main image the person sees is the image sourced inside the IMAGE
tag. The image swapped out during the roll over is the image sourced in
the F_loadRollover function call.)

4 - Replace /www/path/to/imageHI.gif with the path and name of the
secondary image. Use relative or hard links, script does not care.

5 - Replace the ALT value with something descriptive to your URL. Don't
piss off those using Lynx, older browsers, surfing without images on or
other reasons.

6 - Repeat the URL/Image tag combination for each set of rollover
images.


### How does this work??? ####

Here's my flimsy two cents, since I am NOT the JavaScript Guru:

When the images are loaded, you'll notice that the second image is
loaded via the first JavaScript Function (F_loadRollover). This function
creates an Array of Images using the Name of the image during the page
load. When the mouse overs are invoked they call the second Java Script
Function (F_roll).  The second function takes the name of the image and
'1' or '0'. With that info, it invokes the proper image via the array
built previously and makes that one auto-magically appear.

Ta Da. Image rollovers.

//-->

Good Luck.....Hope this helps or at least does not hurt.

-- 
Anthony Baratta
President
KeyBoard Jockeys
                    South Park Speaks Version 3 is here!!!
                       http://www.baratta.com/southpark
                              Powered by Tsunami