Caching of Images for Buttons

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>
LVL 7
twardAsked:
Who is Participating?
 
AssenConnect With a Mentor Commented:
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
 
jelloCommented:
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
 
jelloCommented:
oops -- ignore the "/" before 'onimage2.gif' in the script.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
twardAuthor Commented:
I've tried something very similar to what you have above and in IE5.0 and NetScape 4.7 it does not work.
0
 
AssenCommented:
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
 
twardAuthor Commented:
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
 
twardAuthor Commented:
Assen,

  I prefer not to use macromedia when I should be able to get it to work without!
0
 
twardAuthor Commented:
Scratch that, it still doesn't seem to work with Netscape 4.7 either...?
0
 
jelloCommented:
tward-
Try checking your browser's cache settings.  Also, try checking it on another machine.

-jello
0
 
AssenCommented:
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
 
twardAuthor Commented:
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
 
egbservicesCommented:
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
 
twardAuthor Commented:
This is really the same as the previous examples, and none of them work under IE 5.0....
0
 
AssenCommented:
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
 
egbservicesCommented:
Hi tward
I don't know your real settings but I use IE5 and it works fine...
0
 
twardAuthor Commented:
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
 
AssenCommented:
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
 
twardAuthor Commented:
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
 
twardAuthor Commented:
Thank you, that did make it work in IE 5.0.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.