Solved

Pre-cached images for roll-over effects

Posted on 1998-08-14
6
217 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 63
Angular 2 - Issue in page Layout 2 48
Applying an inline style that applies to child elements 2 36
How to count in a table in php 22 17
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.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 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

19 Experts available now in Live!

Get 1:1 Help Now