Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I preload images? 1

Status
Not open for further replies.

McBugzz

Programmer
Sep 17, 2002
90
JP
What does a jscript that preloads images look like?
 
Well I used an image preloading to avoid net trafic when using roll-over butons (that change their images on mouse enter and leave). to do that, I used an hidden div (<DIV style=&quot;display : hidden&quot;>...<DIV>) in wich I put all the images that I need in the form of single IMG tags. Then on the onMouseEnter or onMouseLeave event, i Wrote &quot;this.src=hiddenimage.src&quot; instead of the path of the image. Water is not bad as soon as it stays out human body ;-)
 
The rigth thing is this:

<script>
if (document.images)
{
img1 = new Image();
img1.src = &quot;images/photo1.gif&quot;;
img2 = new Image();
img2.src = &quot;images/photo2.gif&quot;;
. . .
}
</script>
(it should be without any function!)

The most simple rollover script is this:

function swap(imgNumb,imgFile) {
if (document.images)
document.images
.src = eval(imgFile + '.src');
}

Call it like this:
<a href=&quot;...&quot; onmouseover=&quot;swap('n1','img2')&quot; onmouseout=&quot;swap('n1','img1')&quot;><img src=&quot;images/photo2.gif&quot; name=&quot;n1&quot; ...></a>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top