Welcome to WebmasterWorld Guest from 35.171.45.91

Forum Moderators: open

Message Too Old, No Replies

Preload Rollover Images

My preload doesn't seem to work

     
4:09 pm on Oct 5, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Aug 18, 2003
posts:205
votes: 0


Can someone suggest some javascript which has been proven to preload a rollover image. Using a 56k modem I have viewed my webpage in IE6, the page has completely finished loading, so I hover over the rollover button and the rollover image hasn't yet loaded!

Anyone help?

4:31 pm on Oct 5, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 27, 2003
posts:637
votes: 1


Cricketer,
Post your code that you are using, and we'll see if we might be able to spot something wrong with it.

Mac

5:06 pm on Oct 5, 2003 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Mar 31, 2002
posts:7577
votes: 4


Check the img src path. Make sure it doesn't reference your local drive:

src="c:\mywebdir\myimgdir\myimg.jpg"

Also check to be sure your javascript syntax is correct.

6:55 pm on Oct 5, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Also in your preload script, make sure you're using RELATIVE paths, not full, absolute paths. IE 5 and 6 have a javascript bug -- even though the full path actually does preload the image into the user's cache, when the mouseover occurs Explorer will not use the cached image. Instead it downloads the image all over again.
9:42 pm on Nov 4, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Aug 18, 2003
posts:205
votes: 0


Sorry for the delay folks, I thought I had posted a message here to say that i'd be away for a bit, but obviously i didn't, so sorry to you folks that left answers.

No I've definitely been using relative paths tedster. I still havn't solved this, is my code wrong, or is there a better solution?


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('images/button2.gif')">
<a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/button2.gif',1)"><img name="Image1" border="0" src="images/button.gif" width="69" height="88"></a>
</body>
</html>
11:08 pm on Nov 4, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Goodness...MM code is messy!

This is a bit cleaner...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css" title="Default Style">
<!--
html, body {
background: white;
color: black;
font: 0.94em Verdana, Helvetica, Sans-Serif;
}
.image {
width: 69px;
height: 88px;
border: none;
}
-->
</style>

<script type="text/javascript">
<!--
// array of images
var imgs = new Array(3);
imgs[0] = "./images/button.gif";
imgs[1] = "./images/button1.gif";
imgs[2] = "./images/button2.gif";

// preload the images
function preload() {
var tmp = null;
for (var j = 0; j < imgs.length; j++) {
tmp = imgs[j];
imgs[j] = new Image();
imgs[j].src = tmp;
}
}
void(preload());

// swap images
function imgSwap(img, swap) {
img.src = imgs[swap].src;
}
//-->
</script>

</head>
</body>

<div>
<img src="./images/button.gif" class="image"
onmouseover="imgSwap(this, 2);"
onmouseout="imgSwap(this, 0);" />
<img src="./images/button1.gif" class="image"
onmouseover="imgSwap(this, 2);"
onmouseout="imgSwap(this, 1);" />
</div>

</body>
</html>

Jordan

9:05 pm on Nov 5, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Aug 18, 2003
posts:205
votes: 0


Cheers MonkeeSage

I reviewed my old code yet again and have now come to the conclusion that it does work, but it is still slightly glitchy.

So thanks to you displaying this new code, I will now have a look at it and hopefully things will go smoother.

thanks