Ultimate onMouseOver IMage Changing

**N*G*Evangelion** · Mar 1st, 2001, 05:26 AM

Can anyone give me a site (or post the code) for changing images on mouseover events and pre-loading those images?

I need code that will be minimal, but works very well on IE/NN 4+ generation browsers.

Thanks in advance.

**Kagey** · Mar 1st, 2001, 08:54 PM

Example: You have two images: img1 and img2.
Img2 will show when user moves mouse over a link that uses IMG1.

So, first write the following in the <HEAD> section:

--------------------------------------------
<HEAD>

<SCRIPT>

img1 = new Image(58,70);
img1.src = "images/img1.gif";
img2 = new Image(58,70);
img2.src = "images/img2.gif";

function hilite(imgDocID,imgObjName)
{
document.images[imgDocID].src = eval(imgObjName + ".src")
}

</SCRIPT>
--------------------------------------------

So, here, first four lines preloads images and function "hilite" will change one image to another in your code. First param of this function is NAME of IMAGE object (<IMG NAME="...">) and the second param is a name of preloaded image (img1 or img2).

This is example:

<a href="anything.html" OnMouseOver="hilite('img','img2');" OnMouseOut="hilite('img','img1');"> <img src=img1.gif border=0 name="img"> </a>

So, here "img" is a name of image object.

**N*G*Evangelion** · Mar 2nd, 2001, 04:39 AM

Thanks.

**Da Byte** · Oct 28th, 2001, 12:50 PM

Dear Posters!

I use a preloading script for my roll-over images, which are quite small GIFs.
It seems however that they aren't always preloaded when I go over them, while the site has been loaded for quite some time...
Why is this?

Two: the 'onError' handler within the JavaScript code doesn't appear to have the desired effect, as in: it is always triggered.
i.e.:

image_array = new Array( images between quotes and devided by commas );
preloadImages = new Array();
for (j = 1; j <= 8; j++) {
var succes = false;
while (!succes) {
preloadImages[j] = new Image();
preloadImages[j].src = image_array[j];
preloadImages[j].onLoad = eval(succes = true);
preloadImages[j].onError = j--; // debugger: alert("loading image failed");
}

Can anybody help me on one of these or both?

Thanks very much!

**rjlohan** · Oct 28th, 2001, 07:57 PM

Give this a burl. Works for me. See if the errors you have still happen.

function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}

function swtch(num, imgname) {
if (getAppVersion()) {
imgname.src = img[num].src;
}
}

imgsrc = new Array();
imgsrc[0] = "images/pica_1.gif";
imgsrc[1] = "images/pica_2.gif";
imgsrc[2] = "images/picb_1.gif";
imgsrc[3] = "images/picb_2.gif";
...
...
...

img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}

The <IMG> tag would look like:
<IMG align=middle alt="Products & Services" border=0 height=37 name =products src="images/pica_1 useMap=#products width=75 >

The corresponding <MAP> would be:
<MAP NAME="products"><AREA SHAPE="RECT" COORDS="0,0,75,37" HREF="products.htm" TARGET="MAIN" onMouseOver="swtch(1, products)" onMouseOut="swtch(0, products)"></MAP>

**Da Byte** · Oct 28th, 2001, 09:36 PM

Well, thanks a bunch, RJ!
It worked! The images got loaded flawlessly it seems.

Would you also have any recommendations on the use of event handlers to catch unloaded images and retrieve them still?
I.e.
...
img[i].src = imgsrc[i];
img[i].onerror = i--
...

or

for (i = 0; i < imgsrc.length)
...
img[i].onload = i++
...

Thank you!

Grtz.,

**rjlohan** · Oct 28th, 2001, 09:55 PM

I don't really have any *good* ideas, I'm afraid. But to reassure you, I've been using that script for a long time with no probs. The only error I would get with that results from a picture actually not being on the server, and catching that in a script would be a pain.

I'm not really sure what you're trying to do with that last snippet. What I use this code for is just a simple onMouseOver highlight, so users know what they are gonna be clicking on. (Its really just to pretty up a business site...

)

What are you trying to do with the script? And what do you want error handling for?

**Da Byte** · Oct 29th, 2001, 08:05 AM

So, RJ, you're curious after my reasons for using an error handler in my image preloading script.

I am using it to load control interface roll-overs to my navigatable Lego WebCam and I just simply hate to find out that images weren't loaded. And then I have wait for the image to load when I went over them with my mouse once already.

By the way, I have another burning issue...
Could you tell me how to dynamically change text in a page without using a form's input box?

Thanks again, RJ!

Grtz.,

**rjlohan** · Oct 30th, 2001, 02:33 AM

Can't offer much help for the error handling thing, I've never really thought about it.

As for dynamically changing text, you could use server-side scripts when the page loads, or even client side, but I'm guessing this isn't what you want.

JavaScript has some functions to do this, I can't remember what they are, and I don't think they work in NS.

This is the JavaScript Function (with the names of the parameters).I'm not quite sure how they work, but if you do a search on these, you may find some info.

document.body.insertAdjacentHTML(where, html)

**Da Byte** · Oct 30th, 2001, 07:56 AM

Thanks, RJ, I will look into it!

Keep me posted if you find anything!

Grtz.,

**Da Byte** · Nov 1st, 2001, 12:43 PM

Dear loyal readers of this topic,

I have a nice tip for you. If you, like me, are struggling with small GIF images not being loaded (properly) or to prevent a bad connection from ruining your page. And error handlers within the JavaScript don't work*, then this one's for you!

Add this to the body of your document:
<img src="image" name="unescapable_GIF" onError="unescapable_GIF.src=unescapable_GIF.src">

A nice idea for an image preloader would then be:
<img src="name first image (e.g image0.gif)" width=0 height=0 name="preload_image" onLoad="if(!n)n=0;if(n<the number of images){n++;preload_image.src='controls'+n+'.gif'}else{return true}" onError="preload_image.src='controls'+n+'.gif'">

You could also put the code from within the onError and
onLoad porperties inside functions (e.g. "onloadHandler()" and "errorHandler()") located in within the script tags and simply call those from within the tag's properties.

*) Although I came across an image property named "complete". I'm as of yet unaware if this is comparable to the "onerror"property/error handler handler...

Thank you for your attention. This is the end of this instalment of "This just in!".

Happy Coding and until next time!

P.S.: feel free to post to ask me about the code or to correct me!

Grtz.,

Thread: Ultimate onMouseOver IMage Changing

Thread Tools

Display

Preloading SMALL GIFs

This just in!

Posting Permissions