Solved

Caching of Images for Buttons

Posted on 2000-02-25
19
231 Views
Last Modified: 2008-02-20
I am using different buttons when the mouse is over the button.

I've read certain articles about caching the images used, below is the following code as seen in MSDN as well, but it still downloads the over button each time the mouse goes over it (I don't want it to donwload the over image each time):

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the script
// Initializing all of the highlighted buttons
// This downloads the images before they are viewed

var Cache1;
var Cache2;
var Cache3;
var Cache4;
var Cache5;
var Cache6;
var Cache7;
var Cache8;
var Cache9;
var Cache10;
var Cache11;
var Cache12;
var Cache13;
var Cache14;
var Cache15;
var Cache16;
var Cache17;
var Cache18;

Cache1 = new Image();
Cache1.src = "images/Buttons/AboutON.jpg";
Cache2 = new Image();
Cache2.src = "images/Buttons/AboutOVER.jpg";
Cache3 = new Image();
Cache3.src = "images/Buttons/AboutOFF.jpg";

Cache4 = new Image();
Cache4.src = "images/Buttons/TrainingOn.jpg";
Cache5 = new Image();
Cache5.src = "images/Buttons/TrainingOver.jpg";
Cache6 = new Image();
Cache6.src = "images/Buttons/TrainingOff.jpg";

Cache7 = new Image();
Cache7.src = "images/Buttons/StudsOn.jpg";
Cache8 = new Image();
Cache8.src = "images/Buttons/StudsOver.jpg";
Cache9 = new Image();
Cache9.src = "images/Buttons/StudsOff.jpg";

Cache10 = new Image();
Cache10.src = "images/Buttons/JackOn.jpg";
Cache11 = new Image();
Cache11.src = "images/Buttons/JackOver.jpg";
Cache12 = new Image();
Cache12.src = "images/Buttons/JackOff.jpg";

Cache13 = new Image();
Cache13.src = "images/Buttons/4SaleOn.jpg";
Cache14 = new Image();
Cache14.src = "images/Buttons/4SaleOver.jpg";
Cache15 = new Image();
Cache15.src = "images/Buttons/4SaleOff.jpg";

Cache16 = new Image();
Cache16.src = "images/Buttons/QEquineOn.jpg";
Cache17 = new Image();
Cache17.src = "images/Buttons/QEquineOver.jpg";
Cache18 = new Image();
Cache18.src = "images/Buttons/QEquineOff.jpg";

function ChangeImage(OverOrOff)
{
 var e;
 e = window.event.srcElement;

 if(e.tagName=="IMG" && OverOrOff=="Off")
   e.src = e.offsrc;

 if(e.tagName=="IMG" && OverOrOff=="Over")
   e.src = e.oversrc;
}
// -->
</SCRIPT>

  <TR>
    <TD ALIGN=CENTER><A HREF="about.htm" target="Content" onmouseover="ChangeImage('Over');self.status='About Quarter-Mor Farm';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/AboutOVER.jpg" offsrc="images/Buttons/AboutOFF.jpg" src="images/Buttons/AboutOFF.jpg" alt="About Quarter-Mor Farm" border="0" name="About"></A></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><A HREF="training.htm" target="Content" onmouseover="ChangeImage('Over');self.status='Horse Training';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/TrainingOver.jpg" offsrc="images/Buttons/TrainingOff.jpg" src="images/Buttons/TrainingOff.jpg" alt="Horse Training" border="0" name="Training"></A></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><A HREF="studs.htm" target="Content" onmouseover="ChangeImage('Over');self.status='Studs';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/StudsOver.jpg" offsrc="images/Buttons/StudsOff.jpg" src="images/Buttons/StudsOff.jpg" alt="Studs" border="0" name="Studs"></A></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><A HREF="jacks.htm" target="Content" onmouseover="ChangeImage('Over');self.status='Jacks';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/JackOver.jpg" offsrc="images/Buttons/JackOff.jpg" src="images/Buttons/JackOff.jpg" alt="Jack Russell Terrier Puppies" border="0" name="Jacks"></A></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><A HREF="4Sale.htm" target="Content" onmouseover="ChangeImage('Over');self.status='Horses for Sale';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/4SaleOver.jpg" offsrc="images/Buttons/4SaleOff.jpg" src="images/Buttons/4SaleOff.jpg" alt="Horses for Sale" border="0" name="ForSale"></A></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><A HREF="QEquine.htm" target="Content" onmouseover="ChangeImage('Over');self.status='Quality Equine Dentistry, Inc.';return true" onmouseout="ChangeImage('Off');self.status='';return true"><img oversrc="images/Buttons/QEquineOver.jpg" offsrc="images/Buttons/QEquineOff.jpg" src="images/Buttons/QEquineOff.jpg" alt="Quality Equine Dentistry, Inc." border="0" name="QEquine"></A></TD>
  </TR>
0
Comment
Question by:tward
  • 9
  • 5
  • 3
  • +1
19 Comments
 
LVL 1

Expert Comment

by:jello
ID: 2557983
You have to remember that MS code is geard towards MS products.  Here is the mouseover routine that I use on several sites.  It always cahces the image, and it works beautifully in both Netscape and IE:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if ((browserName == "Netscape" && browserVer >= 3) ||
    (browserName == "Microsoft Internet Explorer" && browserVer >= 4))
      version = "n3";
else version = "n2";
if (version == "n3") {
xxxon = new Image(110, 44);
xxxon.src = "onimage1.gif";
yyyon = new Image(110, 44);
yyyon.src = "/onimage2.gif";

xxxoff = new Image(110, 44);
xxxoff.src = "image1.gif";
yyyoff = new Image(110, 44);
yyyoff.src = "image2.gif";
}

function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}

function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

      <A HREF="link1.html" ONMOUSEOVER="img_act ('xxx')" ONMOUSEOUT="img_inact('xxx')"><IMG  NAME="xxx" SRC="image1.gif"></A>
      <A HREF="link2.html" ONMOUSEOVER="img_act ('yyy')" ONMOUSEOUT="img_inact('yyy')"><IMG NAME="yyy" SRC="image2.gif"></A>
</BODY>
</HTML>
0
 
LVL 1

Expert Comment

by:jello
ID: 2557988
oops -- ignore the "/" before 'onimage2.gif' in the script.
0
 
LVL 7

Author Comment

by:tward
ID: 2558095
I've tried something very similar to what you have above and in IE5.0 and NetScape 4.7 it does not work.
0
 
LVL 1

Expert Comment

by:Assen
ID: 2564526
You can make very easy roll-over buttons with Dreamweaver, without writind any script. Dreamweaver puts the NECESSARY JS script. It eaven put preloading script.
You can get it from  www.macromedia.com

Regards
0
 
LVL 7

Author Comment

by:tward
ID: 2564571
jello,
  You code seems to do the same as what I was using.  It always downloads the buttons as the mouse moves on/off of each button.  You might want to check yours again.  It doesn't seem to work with IE5.0, but it does seem to work with Netscape 4.7.
0
 
LVL 7

Author Comment

by:tward
ID: 2564572
Assen,

  I prefer not to use macromedia when I should be able to get it to work without!
0
 
LVL 7

Author Comment

by:tward
ID: 2564675
Scratch that, it still doesn't seem to work with Netscape 4.7 either...?
0
 
LVL 1

Expert Comment

by:jello
ID: 2564846
tward-
Try checking your browser's cache settings.  Also, try checking it on another machine.

-jello
0
 
LVL 1

Expert Comment

by:Assen
ID: 2564945
ok try this:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('homea1.gif')">
<a href="http://skins.ontheweb.nu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','homea1.gif',1)"><img name="Image1" border="0" src="homea.gif" width="165" height="45"></a>
</body>
</html>

homea.gif and homea1.gif are the names of the pictures

Assen
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 7

Author Comment

by:tward
ID: 2564970
jello,

  My settings are 163MB for Temporary Internet Files.  The buttons are actually there in the Temp Files.  Don't know why they keep having to download....
0
 
LVL 2

Expert Comment

by:egbservices
ID: 2571836
To add to the confusion an other, similar example of js from one of my pages...

------------------------------------------

<script LANGUAGE="JavaScript">

<!--

if (document.images)
{
      home1 = new Image(195,28);
      home1.src = "images/home1.gif";
      home2 = new Image(195,28);
      home2.src = "images/home2.gif";

      product1 = new Image(195,28);
      product1.src = "images/product1.gif";
      product2 = new Image(195,28);
      product2.src = "images/product2.gif";

      condit1 = new Image(195,28);
      condit1.src = "images/condit1.gif";
      condit2 = new Image(195,28);
      condit2.src = "images/condit2.gif";

      order1 = new Image(195,28);
      order1.src = "images/order1.gif";
      order2 = new Image(195,28);
      order2.src = "images/order2.gif";

}

function hiLite(normal, hiLite)
{
  if(document.images)
    {
    document.images[normal].src = eval(hiLite + ".src");
    }
  return;
}

// -->

  </script>
</head>

<body background="images/backgrnd.jpg" topmargin="0" leftmargin="0">

<img SRC="images/home1.gif" NAME="home" ALT="Home" BORDER=0 NATURALSIZEFLAG="0" height=28 width=195 align=BOTTOM>

<br><a href="product.htm" ONMOUSEOVER="hiLite('product','product1')" ONMOUSEOUT="hiLite('product','product2')"><img SRC="images/product2.gif" NAME="product" ALT="Products" BORDER=0 NATURALSIZEFLAG="0" height=28 width=195 align=BOTTOM></a>

<br><a href="condit.htm" ONMOUSEOVER="hiLite('condit','condit1')" ONMOUSEOUT="hiLite('condit','condit2')"><img SRC="images/condit2.gif" NAME="condit" ALT="Condition of sales" BORDER=0 NATURALSIZEFLAG="0" height=28 width=195 align=BOTTOM></a>

<br><a href="order.htm" ONMOUSEOVER="hiLite('order','order1')" ONMOUSEOUT="hiLite('order','order2')"><img SRC="images/order2.gif" NAME="order" ALT="Order form" BORDER=0 NATURALSIZEFLAG="0" height=28 width=195 align=BOTTOM></a>
0
 
LVL 7

Author Comment

by:tward
ID: 2572148
This is really the same as the previous examples, and none of them work under IE 5.0....
0
 
LVL 1

Expert Comment

by:Assen
ID: 2572158
Hi here is another way to do this:
(this is the script for preloading with some browser checking)

<script language="JavaScript"><!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { roll = 'true'; }
else { roll = 'false'; }
if (roll == 'true') {
var imglist = new Array (
"bgdown.gif",
"endown.gif");
var imgs = new Array();
var count;
if (document.images)
 for (count=0; count<imglist.length; count++)
  {imgs[count]=new Image(); imgs[count].src=imglist[count];}}
function msover1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function msout1(img,ref)  { if (roll == 'true') { document.images[img].src = ref; } }
//--></script>

here are the two example links:

<a href="indexb.htm"
onmouseover="msover1('imageA','bgdown.gif');window.status='Click Here to go to the Bg Pages';return true"
onmouseout="msout1('imageA','bg.gif');"><img src="bg.gif"
alt="Bg pages" border="0" width="55" height="45"
name="imageA"></a>

<a href="indexe.htm"
onmouseover="msover1('imageB','endown.gif');window.status='Click Here to go to the En Pages';return true"
onmouseout="msout1('imageB','english.gif');"><img
src="english.gif" alt="En pages" border="0" width="55"
height="45" name="imageB"></a>

regards
0
 
LVL 2

Expert Comment

by:egbservices
ID: 2574353
Hi tward
I don't know your real settings but I use IE5 and it works fine...
0
 
LVL 7

Author Comment

by:tward
ID: 2574596
What settings would affect this?  I've looked at my cache settings and don't really see any reason it shouldn't work, but it doesn't.
0
 
LVL 1

Expert Comment

by:Assen
ID: 2575582
Hi tward
You can look at Temporary Intrnet Files at Internet option menu.
I have tested the last script (i have proposed) in several pages and it works perfectly.

regards
0
 
LVL 7

Author Comment

by:tward
ID: 2575982
Check Out:

http://www.angelfire.com/va2/quartermor

Go to the Left Frame, this is using code that is similar to most that has been given here, and it seems to work most of the time in Netscape 4.7 but always downloads the pictures as you move the mouse over and off of the buttons with IE 5.x....
0
 
LVL 1

Accepted Solution

by:
Assen earned 100 total points
ID: 2576008
It works perfectly on IE5 !
I have the same problem it could be from your brouser setings. Look at 'Temporary Intrnet Files' setings and put the radio button to Automatically.

regards
0
 
LVL 7

Author Comment

by:tward
ID: 2576249
Thank you, that did make it work in IE 5.0.
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

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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 learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

746 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

15 Experts available now in Live!

Get 1:1 Help Now