General discussion

Locked

Preload Images For mouseOvers in JavaScr

By Kyle B. ·
Hey there,

I was wondering how to load the images that appear on a mouseover, when the page is first loaded. I want to do this so the browser dosen't have to download the images when the mouseover occurs. I think you JavaScript experts will know what im talking about:
Just a way to load mouseover images when the page is initially loaded.

Maybe some sample script or a reference. Thanks for any help you can give me.

Kyle
kyleb@flymasters.net

This conversation is currently closed to new comments.

5 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Comments

Collapse -

Preload Images For mouseOvers in JavaScr

by Duong beo In reply to Preload Images For mouseO ...

Hi Kyle,

Try this piece of code to preload images. Hope this is what you were looking for.

function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar = new Image();
ar.src = arguments;
}
}
Now you're ready to invoke the function. The following event handler definition does the job:


<BODY onLoad="preload('first.gif', 'second.gif', 'third.gif')">

Good luck,

Duong beo

Collapse -

Preload Images For mouseOvers in JavaScr

by Kyle B. In reply to Preload Images For mouseO ...

Thats exactly what i was looking for. Thanks!

Collapse -

Preload Images For mouseOvers in JavaScr

by Kyle B. In reply to Preload Images For mouseO ...
Collapse -

Preload Images For mouseOvers in JavaScr

by valager In reply to Preload Images For mouseO ...

Hi, I have more easy way, as I think.

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="..."&gt 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.

Collapse -

Preload Images For mouseOvers in JavaScr

by Kyle B. In reply to Preload Images For mouseO ...

Another Goodie. Thanks!

Back to Web Development Forum
5 total posts (Page 1 of 1)  

Related Discussions

Related Forums