Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Pre-cached images for roll-over effects

Posted on 1998-08-14
6
230 Views
Last Modified: 2010-04-09
I have been trying to find a way to get the client to request and cache images that are used for roll-over buttons. Due to the client-server nature of HTML, this might not be practical, but it would be nice if rollover buttons, even small ones, didn't have a 1-3 second lag while the client gets the active image.
0
Comment
Question by:CDodson
  • 2
  • 2
  • 2
6 Comments
 
LVL 2

Expert Comment

by:bernfarr
ID: 1845337
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>
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1845338
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).


0
 
LVL 2

Expert Comment

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

Bernard
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:CDodson
ID: 1845340
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


0
 
LVL 8

Accepted Solution

by:
jbirk earned 100 total points
ID: 1845341
Nope, you did it perfectly!
Thanks CDodson!
Did the code I pasted do it for you, or do you need further assistence?
-Josh
0
 

Author Comment

by:CDodson
ID: 1845342
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 -
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question