Solved

Pre-cached images for roll-over effects

Posted on 1998-08-14
6
234 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
[X]
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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to refresh a page from a sub domain in ajax ? 34 43
Output to HTML in powershell 3 37
Show Ruler in Outlook 2010 STILL NOT SHOWING! 4 39
Change how page is organized 3 36
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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?
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

756 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