Solved

Pre-cached images for roll-over effects

Posted on 1998-08-14
6
209 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

757 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now