Preload Rollover Images

Forum Moderators: open

Message Too Old, No Replies

Preload Rollover Images

My preload doesn't seem to work

The Cricketer

4:09 pm on Oct 5, 2003 (gmt 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?

macrost

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

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

Mac

lorax

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

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.

tedster

6:55 pm on Oct 5, 2003 (gmt 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.

The Cricketer

9:42 pm on Nov 4, 2003 (gmt 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>

MonkeeSage

11:08 pm on Nov 4, 2003 (gmt 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

The Cricketer

9:05 pm on Nov 5, 2003 (gmt 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