rollovers not preloading images, why?

D

Dave

Hi,

I have an app that uses rollover images, but the images are still pulled
from the web server during a mouseover instead of being pulled from memory.
The code is as follows:

the javascript:
<script language="JavaScript">

function MM_findObj(n, d) {
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
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))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

if (document.images) {
tab1_f2 = new Image(150 ,23); tab1_f2.src = "images/tab1_f2.gif";
tab1_f1 = new Image(150 ,23); tab1_f1.src = "images/tab1.gif";
tab6_f2 = new Image(100 ,4); tab6_f2.src = "images/tab6_f2.gif";
tab6_f1 = new Image(100 ,4); tab6_f1.src = "images/tab6.gif";
tab7_f2 = new Image(50 ,4); tab7_f2.src = "images/tab7_f2.gif";
tab7_f1 = new Image(50 ,4); tab7_f1.src = "images/tab7.gif";
tab2_f3 = new Image(129 ,23); tab2_f3.src = "images/tab2_f3.gif";
tab2_f1 = new Image(129 ,23); tab2_f1.src = "images/tab2.gif";
kle_r10_c11_f3 = new Image(45 ,4); kle_r10_c11_f3.src =
"images/kle_r10_c11_f3.gif";
kle_r10_c11_f1 = new Image(45 ,4); kle_r10_c11_f1.src =
"images/kle_r10_c11.gif";
tab8_f3 = new Image(84 ,4); tab8_f3.src = "images/tab8_f3.gif";
tab8_f1 = new Image(84 ,4); tab8_f1.src = "images/tab8.gif";
tab3_f4 = new Image(169 ,23); tab3_f4.src = "images/tab3_f4.gif";
tab3_f1 = new Image(169 ,23); tab3_f1.src = "images/tab3.gif";
kle_r10_c13_f4 = new Image(46 ,4); kle_r10_c13_f4.src =
"images/kle_r10_c13_f4.gif";
kle_r10_c13_f1 = new Image(46 ,4); kle_r10_c13_f1.src =
"images/kle_r10_c13.gif";
tab9_f4 = new Image(93 ,4); tab9_f4.src = "images/tab9_f4.gif";
tab9_f1 = new Image(93 ,4); tab9_f1.src = "images/tab9.gif";
tab10_f4 = new Image(30 ,4); tab10_f4.src = "images/tab10_f4.gif";
tab10_f1 = new Image(30 ,4); tab10_f1.src = "images/tab10.gif";
tab4_f5 = new Image(121 ,23); tab4_f5.src = "images/tab4_f5.gif";
tab4_f1 = new Image(121 ,23); tab4_f1.src = "images/tab4.gif";
kle_r10_c16_f5 = new Image(115 ,4); kle_r10_c16_f5.src =
"images/kle_r10_c16_f5.gif";
kle_r10_c16_f1 = new Image(115 ,4); kle_r10_c16_f1.src =
"images/kle_r10_c16.gif";
tab11_f5 = new Image(6 ,4); tab11_f5.src = "images/tab11_f5.gif";
tab11_f1 = new Image(6 ,4); tab11_f1.src = "images/tab11.gif";
tab5_f6 = new Image(139 ,23); tab5_f6.src = "images/tab5_f6.gif";
tab5_f1 = new Image(139 ,23); tab5_f1.src = "images/tab5.gif";
kle_r10_c20_f6 = new Image(139 ,4); kle_r10_c20_f6.src =
"images/kle_r10_c20_f6.gif";
kle_r10_c20_f1 = new Image(139 ,4); kle_r10_c20_f1.src =
"images/kle_r10_c20.gif";
tab6_f7 = new Image(100 ,4); tab6_f7.src = "images/tab6_f7.gif";
kle_r12_c4_f7 = new Image(100 ,23); kle_r12_c4_f7.src =
"images/kle_r12_c4_f7.gif";
kle_r12_c4_f1 = new Image(100 ,23); kle_r12_c4_f1.src =
"images/kle_r12_c4.gif";
tab7_f8 = new Image(50 ,4); tab7_f8.src = "images/tab7_f8.gif";
kle_r10_c11_f8 = new Image(45 ,4); kle_r10_c11_f8.src =
"images/kle_r10_c11_f8.gif";
kle_r12_c10_f8 = new Image(95 ,23); kle_r12_c10_f8.src =
"images/kle_r12_c10_f8.gif";
kle_r12_c10_f1 = new Image(95 ,23); kle_r12_c10_f1.src =
"images/kle_r12_c10.gif";
tab8_f9 = new Image(84 ,4); tab8_f9.src = "images/tab8_f9.gif";
kle_r10_c13_f9 = new Image(46 ,4); kle_r10_c13_f9.src =
"images/kle_r10_c13_f9.gif";
kle_r12_c12_f9 = new Image(130 ,23); kle_r12_c12_f9.src =
"images/kle_r12_c12_f9.gif";
kle_r12_c12_f1 = new Image(130 ,23); kle_r12_c12_f1.src =
"images/kle_r12_c12.gif";
tab9_f10 = new Image(93 ,4); tab9_f10.src = "images/tab9_f10.gif";
kle_r12_c14_f10 = new Image(93 ,23); kle_r12_c14_f10.src =
"images/kle_r12_c14_f10.gif";
kle_r12_c14_f1 = new Image(93 ,23); kle_r12_c14_f1.src =
"images/kle_r12_c14.gif";
tab10_f11 = new Image(30 ,4); tab10_f11.src = "images/tab10_f11.gif";
kle_r10_c16_f11 = new Image(115 ,4); kle_r10_c16_f11.src =
"images/kle_r10_c16_f11.gif";
kle_r12_c15_f11 = new Image(145 ,23); kle_r12_c15_f11.src =
"images/kle_r12_c15_f11.gif";
kle_r12_c15_f1 = new Image(145 ,23); kle_r12_c15_f1.src =
"images/kle_r12_c15.gif";
tab11_f12 = new Image(6 ,4); tab11_f12.src = "images/tab11_f12.gif";
kle_r10_c20_f12 = new Image(139 ,4); kle_r10_c20_f12.src =
"images/kle_r10_c20_f12.gif";
kle_r12_c19_f12 = new Image(145 ,23); kle_r12_c19_f12.src =
"images/kle_r12_c19_f12.gif";
kle_r12_c19_f1 = new Image(145 ,23); kle_r12_c19_f1.src =
"images/kle_r12_c19.gif";

}
</script>


THE IMAGE MAP:

<map name="CARTMAP"><area shape="RECT" coords="0,0,115,52"
href="http://kieslerle/cart.aspx" alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">
<area shape="RECT" coords="0,-23,115,29" href="http://kieslerle/cart.aspx"
alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">
<area shape="RECT" coords="-109,-23,6,29" href="http://kieslerle/cart.aspx"
alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">
<area shape="RECT" coords="0,-36,115,16" href="http://kieslerle/cart.aspx"
alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">

<area shape="RECT" coords="-109,-36,6,16" href="http://kieslerle/cart.aspx"
alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">
<area shape="RECT" coords="0,-49,115,3" href="http://kieslerle/cart.aspx"
alt="Click Here to view Shopping Cart"
onMouseOut="MM_swapImage('le_r2_c10','','../images3/le_r2_c10.gif',1);"
onMouseOver="MM_swapImage('le_r2_c10','','../images3/le_r2_c10_f2.gif',1);">
</map><map name="m_tab1"><area shape="rect" coords="7,1,142,23"
href="http://kieslerle/category.aspx?TABID=1" alt="Weapons & Ammunition"
onMouseOut="MM_swapImage('tab1','','../images/tab1.gif','tab6','','../images
/tab6.gif','tab7','','../images/tab7.gif',1);"
onMouseOver="MM_swapImage('tab1','','../images/tab1_f2.gif','tab6','','../im
ages/tab6_f2.gif','tab7','','../images/tab7_f2.gif',1);" ></map><map
name="m_tab2"><area shape="rect" coords="7,1,122,23"
href="http://kieslerle/category.aspx?TABID=2" alt="Weapon Accessories"
onMouseOut="MM_swapImage('tab2','','../images/tab2.gif','kle_r10_c11','','..
/images/kle_r10_c11.gif','tab8','','../images/tab8.gif',1);"
onMouseOver="MM_swapImage('tab2','','../images/tab2_f3.gif','kle_r10_c11',''
,'../images/kle_r10_c11_f3.gif','tab8','','../images/tab8_f3.gif',1);"
</map><map name="m_tab3"><area shape="rect" coords="7,1,162,23"
Click to expand...
href="http://kieslerle/category.aspx?TABID=3" alt="Shields, Armor &
Protection"
onMouseOut="MM_swapImage('tab3','','../images/tab3.gif','kle_r10_c13','','..
/images/kle_r10_c13.gif','tab9','','../images/tab9.gif','tab10','','../image
s/tab10.gif',1);"
onMouseOver="MM_swapImage('tab3','','../images/tab3_f4.gif','kle_r10_c13',''
,'../images/kle_r10_c13_f4.gif','tab9','','../images/tab9_f4.gif','tab10',''
,'../images/tab10_f4.gif',1);" ></map><map name="m_tab4"><area shape="rect"
coords="7,1,115,23" href="http://kieslerle/category.aspx?TABID=4"
alt="Training & Survival"
onMouseOut="MM_swapImage('tab4','','../images/tab4.gif','kle_r10_c16','','..
/images/kle_r10_c16.gif','tab11','','../images/tab11.gif',1);"
onMouseOver="MM_swapImage('tab4','','../images/tab4_f5.gif','kle_r10_c16',''
,'../images/kle_r10_c16_f5.gif','tab11','','../images/tab11_f5.gif',1);"
</map><map name="m_tab5"><area shape="rect" coords="6,1,133,23"
Click to expand...
href="http://kieslerle/category.aspx?TABID=5" alt="Optics, Lights & Vision"
onMouseOut="MM_swapImage('tab5','','../images/tab5.gif','kle_r10_c20','','..
/images/kle_r10_c20.gif',1);"
onMouseOver="MM_swapImage('tab5','','../images/tab5_f6.gif','kle_r10_c20',''
,'../images/kle_r10_c20_f6.gif',1);" ></map><map name="m_tab6"><area
shape="rect" coords="6,3,94,26"
href="http://kieslerle/category.aspx?TABID=6" alt="Tactical & Duty"
onMouseOut="MM_swapImage('tab6','','../images/tab6.gif','kle_r12_c4','','../
images/kle_r12_c4.gif',1);"
onMouseOver="MM_swapImage('tab6','','../images/tab6_f7.gif','kle_r12_c4','',
'../images/kle_r12_c4_f7.gif',1);" ></map><map name="m_kle_r12_c4"><area
shape="rect" coords="6,-1,94,22"
href="http://kieslerle/category.aspx?TABID=6" alt="Tactical & Duty"
onMouseOut="MM_swapImage('tab6','','../images/tab6.gif','kle_r12_c4','','../
images/kle_r12_c4.gif',1);"
onMouseOver="MM_swapImage('tab6','','../images/tab6_f7.gif','kle_r12_c4','',
'../images/kle_r12_c4_f7.gif',1);" ></map><map name="m_tab7"><area
shape="rect" coords="6,3,89,26"
href="http://kieslerle/category.aspx?TABID=7" alt="Knives & Tools"
onMouseOut="MM_swapImage('tab7','','../images/tab7.gif','kle_r10_c11','','..
/images/kle_r10_c11.gif','kle_r12_c10','','../images/kle_r12_c10.gif',1);"
onMouseOver="MM_swapImage('tab7','','../images/tab7_f8.gif','kle_r10_c11',''
,'../images/kle_r10_c11_f8.gif','kle_r12_c10','','../images/kle_r12_c10_f8.g
if',1);" ></map><map name="m_kle_r10_c11"><area shape="rect"
coords="-44,3,39,26" href="http://kieslerle/category.aspx?TABID=7"
alt="Knives & Tools"
onMouseOut="MM_swapImage('tab7','','../images/tab7.gif','kle_r10_c11','','..
/images/kle_r10_c11.gif','kle_r12_c10','','../images/kle_r12_c10.gif',1);"
onMouseOver="MM_swapImage('tab7','','../images/tab7_f8.gif','kle_r10_c11',''
,'../images/kle_r10_c11_f8.gif','kle_r12_c10','','../images/kle_r12_c10_f8.g
if',1);" ></map><map name="m_kle_r12_c10"><area shape="rect"
coords="6,-1,89,22" href="http://kieslerle/category.aspx?TABID=7"
alt="Knives & Tools"
onMouseOut="MM_swapImage('tab7','','../images/tab7.gif','kle_r10_c11','','..
/images/kle_r10_c11.gif','kle_r12_c10','','../images/kle_r12_c10.gif',1);"
onMouseOver="MM_swapImage('tab7','','../images/tab7_f8.gif','kle_r10_c11',''
,'../images/kle_r10_c11_f8.gif','kle_r12_c10','','../images/kle_r12_c10_f8.g
if',1);" ></map><map name="m_tab8"><area shape="rect" coords="6,3,125,26"
href="http://kieslerle/category.aspx?TABID=8" alt="Specialty Equipment"
onMouseOut="MM_swapImage('tab8','','../images/tab8.gif','kle_r10_c13','','..
/images/kle_r10_c13.gif','kle_r12_c12','','../images/kle_r12_c12.gif',1);"
onMouseOver="MM_swapImage('tab8','','../images/tab8_f9.gif','kle_r10_c13',''
,'../images/kle_r10_c13_f9.gif','kle_r12_c12','','../images/kle_r12_c12_f9.g
if',1);" ></map><map name="m_kle_r10_c13"><area shape="rect"
coords="-78,3,41,26" href="http://kieslerle/category.aspx?TABID=8"
alt="Specialty Equipment"
onMouseOut="MM_swapImage('tab8','','../images/tab8.gif','kle_r10_c13','','..
/images/kle_r10_c13.gif','kle_r12_c12','','../images/kle_r12_c12.gif',1);"
onMouseOver="MM_swapImage('tab8','','../images/tab8_f9.gif','kle_r10_c13',''
,'../images/kle_r10_c13_f9.gif','kle_r12_c12','','../images/kle_r12_c12_f9.g
if',1);" ></map><map name="m_kle_r12_c12"><area shape="rect"
coords="6,-1,125,22" href="http://kieslerle/category.aspx?TABID=8"
alt="Specialty Equipment"
onMouseOut="MM_swapImage('tab8','','../images/tab8.gif','kle_r10_c13','','..
/images/kle_r10_c13.gif','kle_r12_c12','','../images/kle_r12_c12.gif',1);"
onMouseOver="MM_swapImage('tab8','','../images/tab8_f9.gif','kle_r10_c13',''
,'../images/kle_r10_c13_f9.gif','kle_r12_c12','','../images/kle_r12_c12_f9.g
if',1);" ></map><map name="m_tab9"><area shape="rect" coords="6,3,87,26"
href="http://kieslerle/category.aspx?TABID=9" alt="Miscellaneous"
onMouseOut="MM_swapImage('tab9','','../images/tab9.gif','kle_r12_c14','','..
/images/kle_r12_c14.gif',1);"
onMouseOver="MM_swapImage('tab9','','../images/tab9_f10.gif','kle_r12_c14','
','../images/kle_r12_c14_f10.gif',1);" ></map><map
name="m_kle_r12_c14"><area shape="rect" coords="6,-1,87,22"
href="http://kieslerle/category.aspx?TABID=9" alt="Miscellaneous"
onMouseOut="MM_swapImage('tab9','','../images/tab9.gif','kle_r12_c14','','..
/images/kle_r12_c14.gif',1);"
onMouseOver="MM_swapImage('tab9','','../images/tab9_f10.gif','kle_r12_c14','
','../images/kle_r12_c14_f10.gif',1);" ></map><map name="m_tab10"><area
shape="rect" coords="6,3,138,26"
href="http://kieslerle/category.aspx?TABID=10" alt="Government & Military"
onMouseOut="MM_swapImage('tab10','','../images/tab10.gif','kle_r10_c16','','
.../images/kle_r10_c16.gif','kle_r12_c15','','../images/kle_r12_c15.gif',1);"
onMouseOver="MM_swapImage('tab10','','../images/tab10_f11.gif','kle_r10_c16'
,'','../images/kle_r10_c16_f11.gif','kle_r12_c15','','../images/kle_r12_c15_
f11.gif',1);" ></map><map name="m_kle_r10_c16"><area shape="rect"
coords="-24,3,108,26" href="http://kieslerle/category.aspx?TABID=10"
alt="Government & Military"
onMouseOut="MM_swapImage('tab10','','../images/tab10.gif','kle_r10_c16','','
.../images/kle_r10_c16.gif','kle_r12_c15','','../images/kle_r12_c15.gif',1);"
onMouseOver="MM_swapImage('tab10','','../images/tab10_f11.gif','kle_r10_c16'
,'','../images/kle_r10_c16_f11.gif','kle_r12_c15','','../images/kle_r12_c15_
f11.gif',1);" ></map><map name="m_kle_r12_c15"><area shape="rect"
coords="6,-1,138,22" href="http://kieslerle/category.aspx?TABID=10"
alt="Government & Military"
onMouseOut="MM_swapImage('tab10','','../images/tab10.gif','kle_r10_c16','','
.../images/kle_r10_c16.gif','kle_r12_c15','','../images/kle_r12_c15.gif',1);"
onMouseOver="MM_swapImage('tab10','','../images/tab10_f11.gif','kle_r10_c16'
,'','../images/kle_r10_c16_f11.gif','kle_r12_c15','','../images/kle_r12_c15_
f11.gif',1);" ></map><map name="m_tab11"><area shape="rect"
coords="5,3,139,26" href="http://kieslerle/business.aspx?TABID=11"
alt="Doing Business With Kieslers"
onMouseOut="MM_swapImage('tab11','','../images/tab11.gif','kle_r10_c20','','
.../images/kle_r10_c20.gif','kle_r12_c19','','../images/kle_r12_c19.gif',1);"
onMouseOver="MM_swapImage('tab11','','../images/tab11_f12.gif','kle_r10_c20'
,'','../images/kle_r10_c20_f12.gif','kle_r12_c19','','../images/kle_r12_c19_
f12.gif',1);" ></map><map name="m_kle_r10_c20"><area shape="rect"
coords="-1,3,133,26" href="http://kieslerle/business.aspx?TABID=11"
alt="Doing Business With Kieslers"
onMouseOut="MM_swapImage('tab11','','../images/tab11.gif','kle_r10_c20','','
.../images/kle_r10_c20.gif','kle_r12_c19','','../images/kle_r12_c19.gif',1);"
onMouseOver="MM_swapImage('tab11','','../images/tab11_f12.gif','kle_r10_c20'
,'','../images/kle_r10_c20_f12.gif','kle_r12_c19','','../images/kle_r12_c19_
f12.gif',1);" ></map><map name="m_kle_r12_c19"><area shape="rect"
coords="5,-1,139,22" href="http://kieslerle/business.aspx?TABID=11"
alt="Doing Business With Kieslers"
onMouseOut="MM_swapImage('tab11','','../images/tab11.gif','kle_r10_c20','','
.../images/kle_r10_c20.gif','kle_r12_c19','','../images/kle_r12_c19.gif',1);"
onMouseOver="MM_swapImage('tab11','','../images/tab11_f12.gif','kle_r10_c20'
,'','../images/kle_r10_c20_f12.gif','kle_r12_c19','','../images/kle_r12_c19_
f12.gif',1);" ></map>



THE TABLE CONTAINING THE IMAGES THAT ROLLOVER:

<table border="0" cellpadding="0" cellspacing="0" width="708"><tr><td><table
border="0" cellpadding="0" cellspacing="0" width="708"><tr><td><img
name="tab1" src="../images/tab1.gif" width="150" height="23" border="0"
usemap="#m_tab1" alt=""></td><td><img name="tab2" src="../images/tab2.gif"
width="129" height="23" border="0" usemap="#m_tab2" alt=""></td><td><img
name="tab3" src="../images/tab3.gif" width="169" height="23" border="0"
usemap="#m_tab3" alt=""></td><td><img name="tab4" src="../images/tab4.gif"
width="121" height="23" border="0" usemap="#m_tab4" alt=""></td><td><img
name="tab5" src="../images/tab5.gif" width="139" height="23" border="0"
usemap="#m_tab5" alt=""></td></tr></table></td></tr><tr><td><table
border="0" cellpadding="0" cellspacing="0" width="708"><tr><td><img
name="tab6" src="../images/tab6.gif" width="100" height="4" border="0"
usemap="#m_tab6" alt=""></td><td><img name="tab7" src="../images/tab7.gif"
width="50" height="4" border="0" usemap="#m_tab7" alt=""></td><td><img
name="kle_r10_c11" src="../images/kle_r10_c11.gif" width="45" height="4"
border="0" usemap="#m_kle_r10_c11" alt=""></td><td><img name="tab8"
src="../images/tab8.gif" width="84" height="4" border="0" usemap="#m_tab8"
alt=""></td><td><img name="kle_r10_c13" src="../images/kle_r10_c13.gif"
width="46" height="4" border="0" usemap="#m_kle_r10_c13"
alt=""></td><td><img name="tab9" src="../images/tab9.gif" width="93"
height="4" border="0" usemap="#m_tab9" alt=""></td><td><img name="tab10"
src="../images/tab10.gif" width="30" height="4" border="0" usemap="#m_tab10"
alt=""></td><td><img name="kle_r10_c16" src="../images/kle_r10_c16.gif"
width="115" height="4" border="0" usemap="#m_kle_r10_c16"
alt=""></td><td><img name="tab11" src="../images/tab11.gif" width="6"
height="4" border="0" usemap="#m_tab11" alt=""></td><td><img
name="kle_r10_c20" src="../images/kle_r10_c20.gif" width="139" height="4"
border="0" usemap="#m_kle_r10_c20"
alt=""></td></tr></table></td></tr><tr><td><table border="0" cellpadding="0"
cellspacing="0" width="708"><tr><td><img name="kle_r12_c4"
src="../images/kle_r12_c4.gif" width="100" height="23" border="0"
usemap="#m_kle_r12_c4" alt=""></td><td><img name="kle_r12_c10"
src="../images/kle_r12_c10.gif" width="95" height="23" border="0"
usemap="#m_kle_r12_c10" alt=""></td><td><img name="kle_r12_c12"
src="../images/kle_r12_c12.gif" width="130" height="23" border="0"
usemap="#m_kle_r12_c12" alt=""></td><td><img name="kle_r12_c14"
src="../images/kle_r12_c14.gif" width="93" height="23" border="0"
usemap="#m_kle_r12_c14" alt=""></td><td><img name="kle_r12_c15"
src="../images/kle_r12_c15.gif" width="145" height="23" border="0"
usemap="#m_kle_r12_c15" alt=""></td><td><img name="kle_r12_c19"
src="../images/kle_r12_c19.gif" width="145" height="23" border="0"
usemap="#m_kle_r12_c19" alt=""></td></tr></table></td></tr></table>


Any help or direction of how to cache images using an image map would be
greatly appreciated.

TIA

Dave
 
D

Dave

Hi Jeff,
Sorry about the mess. I put together a simple example (autogenerated with
Fireworks). Basically, instead of using a simple rollover, it uses a an
image map for each tab/button.

go to http://www.miraclecat.com/test/rollover.htm for a simple 2 button
example (using an image map)
http://www.miraclecat.com/test/rollover2.htm for the same example without
the image map.

rollover.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script language="JavaScript">
<!-- hide
function MM_findObj(n, d) { //v4.01
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); 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))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

if (document.images) {
test_r2_c2_f2 = new Image(75 ,31); test_r2_c2_f2.src =
"images/test_r2_c2_f2.gif";
test_r2_c2_f1 = new Image(75 ,31); test_r2_c2_f1.src =
"images/test_r2_c2.gif";
test_r2_c4_f2 = new Image(75 ,31); test_r2_c4_f2.src =
"images/test_r2_c4_f2.gif";
test_r2_c4_f1 = new Image(75 ,31); test_r2_c4_f1.src =
"images/test_r2_c4.gif";
}
// stop hiding -->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td colspan="5"><img name="test_r1_c1" src="images/test_r1_c1.gif"
width="200" height="50" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img name="test_r2_c1" src="images/test_r2_c1.gif"
width="12" height="150" border="0" alt=""></td>
<td><img name="test_r2_c2" src="images/test_r2_c2.gif" width="75"
height="31" border="0" usemap="#m_test_r2_c2" alt=""></td>
<td rowspan="2"><img name="test_r2_c3" src="images/test_r2_c3.gif"
width="21" height="150" border="0" alt=""></td>
<td><img name="test_r2_c4" src="images/test_r2_c4.gif" width="75"
height="31" border="0" usemap="#m_test_r2_c4" alt=""></td>
<td rowspan="2"><img name="test_r2_c5" src="images/test_r2_c5.gif"
width="17" height="150" border="0" alt=""></td>
</tr>
<tr>
<td><img name="test_r3_c2" src="images/test_r3_c2.gif" width="75"
height="119" border="0" alt=""></td>
<td><img name="test_r3_c4" src="images/test_r3_c4.gif" width="75"
height="119" border="0" alt=""></td>
</tr>
<map name="m_test_r2_c2">
<area shape="rect" coords="18,9,53,22" href="#" title="" alt=""
onMouseOut="MM_swapImage('test_r2_c2','','images/test_r2_c2.gif',1);"
onMouseOver="MM_swapImage('test_r2_c2','','images/test_r2_c2_f2.gif',1);" >
</map>
<map name="m_test_r2_c4">
<area shape="rect" coords="18,10,54,22" href="#" title="" alt=""
onMouseOut="MM_swapImage('test_r2_c4','','images/test_r2_c4.gif',1);"
onMouseOver="MM_swapImage('test_r2_c4','','images/test_r2_c4_f2.gif',1);" >
</map>
</table>


</body>
</html>



rollover2.htm (no image map):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>


<script language="JavaScript">
<!-- hide
function MM_findObj(n, d) { //v4.01
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); 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))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

if (document.images) {
test2_r2_c2_f2 = new Image(75 ,31); test2_r2_c2_f2.src =
"images/test2_r2_c2_f2.gif";
test2_r2_c2_f1 = new Image(75 ,31); test2_r2_c2_f1.src =
"images/test2_r2_c2.gif";
test2_r2_c4_f2 = new Image(75 ,31); test2_r2_c4_f2.src =
"images/test2_r2_c4_f2.gif";
test2_r2_c4_f1 = new Image(75 ,31); test2_r2_c4_f1.src =
"images/test2_r2_c4.gif";
}
// stop hiding -->
</script>

<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td colspan="5"><img name="test2_r1_c1" src="images/test2_r1_c1.gif"
width="200" height="50" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img name="test2_r2_c1" src="images/test2_r2_c1.gif"
width="12" height="150" border="0" alt=""></td>
<td><a href="#" onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('test2_r2_c2','','images/test2_r2_c2_f2.gif',1);">
<img name="test2_r2_c2" src="images/test2_r2_c2.gif" width="75" height="31"
border="0" alt=""></a></td>
<td rowspan="2"><img name="test2_r2_c3" src="images/test2_r2_c3.gif"
width="21" height="150" border="0" alt=""></td>
<td><a href="#" onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('test2_r2_c4','','images/test2_r2_c4_f2.gif',1);">
<img name="test2_r2_c4" src="images/test2_r2_c4.gif" width="75" height="31"
border="0" alt=""></a></td>
<td rowspan="2"><img name="test2_r2_c5" src="images/test2_r2_c5.gif"
width="17" height="150" border="0" alt=""></td>
</tr>
<tr>
<td><img name="test2_r3_c2" src="images/test2_r3_c2.gif" width="75"
height="119" border="0" alt=""></td>
<td><img name="test2_r3_c4" src="images/test2_r3_c4.gif" width="75"
height="119" border="0" alt=""></td>
</tr>
</table>

</body>
</html>


TIA

Dave
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JQuery - Preloading Images 0
Help with Visual Lightbox: Scripts 2
Having difficulty with the layout of these images / video for this web page 2
Flip-Cards with Local Images 1
How can i fix Mysql images not found error? 0
Image not changing between "mute" & "un-mute" images. 5
Sort by number of characters 1
Advice on Preloading Images. 1

Members online

Total: 25 (members: 1, guests: 24)
Robots: 396

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top