Pre-cached images for roll-over effects

There is a trick that's described in the Creating Killer Web Sites book. What you do is preload the image into the browser cache by displaying as a single pixel the page that either precedes the image, or will use the image.

<IMG SRC="myrollover.jpg" HEIGHT=1 WIDTH=1 HSPACE=0 VSPACE=0>

That is the old way to preload images.  I've read that too, but now you can use JavaScript to do this efficiently in the background.  Here is some sample code which preloads the images and swaps them:

<script language="JavaScript">

<!-- conceal
if (document.images)
{
OnCards = new Image(200,50);
OnCards.src = "images/cards_on.gif";
OffCards = new Image(200,50);
OffCards.src = "images/cards_off.gif";

OnFamily = new Image(200,50);
OnFamily.src = "images/Family_on.gif";
OffFamily = new Image(200,50);
OffFamily.src = "images/Family_off.gif";

OnWeb = new Image(200,50);
OnWeb.src = "images/web_on.gif";
OffWeb = new Image(200,50);
OffWeb.src = "images/web_off.gif";

OnResume = new Image(200,50);
OnResume.src = "images/resume_on.gif";
OffResume = new Image(200,50);
OffResume.src = "images/resume_off.gif";

OnLinks = new Image(200,50);
OnLinks.src = "images/links_on.gif";
OffLinks = new Image(200,50);
OffLinks.src = "images/links_off.gif";

OnHome = new Image(200,50);
OnHome.src = "images/home_on.gif";
OffHome = new Image(200,50);
OffHome.src = "images/home_off.gif";
}

function LightOn(img_name)
{if (document.images)
  document.images[img_name].src = eval("On"+img_name+".src");
}

function LightOff(img_name)
{if (document.images)
  document.images[img_name].src = eval("Off"+img_name+".src");
}

// reveal -->

</SCRIPT>


And then this is what the images with the mouseovers look like:

<CENTER><A HREF="index.html" onMouseOver="LightOn('Home');" onMouseOut="LightOff('Home')">
<img src="images/home_off.gif" name="Home" width=200 height=50 alt="Home" border="0"></A>
<A HREF="Resume/index.html" onMouseOver="LightOn('Resume');" onMouseOut="LightOff('Resume')">
<img src="images/resume_off.gif" name="Resume" width=200 height=50 alt="My Resume" border="0"></A>
<A HREF="Family/index.html" onMouseOver="LightOn('Family');" onMouseOut="LightOff('Family')">
<img src="images/Family_off.gif" name="Family" width=200 height=50 alt="Family and Friends" border="0"></A>
<BR><A HREF="Web/index.html" onMouseOver="LightOn('Web');" onMouseOut="LightOff('Web')">
<img src="images/web_off.gif" name="Web" width=200 height=50 alt="Web Publishing" border="0"></A>
<A HREF="cardsforsale/index.html" onMouseOver="LightOn('Cards');" onMouseOut="LightOff('Cards')">
<img src="images/cards_off.gif" name="Cards" width=200 height=50 alt="CCG Cards For Sale" border="0"></A>
<A HREF="links.html" onMouseOver="LightOn('Links');" onMouseOut="LightOff('Links')">
<img src="images/links_off.gif" name="Links" width=200 height=50 alt="Links" border="0"></A></CENTER>

The section which declares the image objects is the part which preloads the images.  This is the accepted method now for image rollovers.  It works in Netscape 3+ and IE 4+.  Of course you can't have rollovers in IE 3 since it doesn't support image objects.

If you need any help getting this code customized to work for your page, post the code for your page, and I can customize it for you properly.

-Josh

P.S. If you use my answer, please be sure NOT to grade bernfarr, as he will get the points, and not me.  You would have to reject his answer and ask me to then answer it.  (I only say this out of experience with new users doing this to me).

Josh's answer is more appropriate to the question, so do reject mine and give him the points.

Bernard

As I understand it, by Re-opening this question, I am rejecting benfarr's answer (at his request). jbirk should receive the points for answering my question. Please allow jbirk ample time to "answer" this question, so that the points will be properly directed.

If I am mis-unserstanding this process, I am open to advice ...


CD

When I first began using rollovers, I found and used code that was publically available from one of the JavaScript sites. That code is very similar to what you propose, and it works fine. I wasn't aware that the images were being pre-cached, though.

Later, one of the folks here came up with a seriously condensed version:

<script language="JavaScript">
// <!--

function TurnOn( imageName )
{
      document.images[imageName].src = document.images[imageName].src.substring(0,(document.images[imageName].src.indexOf(".gif"))) + "Sel.gif";
}

function TurnOff( imageName )
{
      document.images[imageName].src = document.images[imageName].src.substring(0,(document.images[imageName].src.indexOf("Sel.gif"))) + ".gif";
}
// -->
</script>


This is then called as you would expect. All images have "Sel" in their name. This code works great, and is very portable; I don't ever have to alter the code, just name the images (which I do anyway for sanity's sake).

I will go back to the code you propose and try it out on a test page (200kb+ images) and test for lag time. I suspect that it will disappear ...

Thanks again!


Carl -