The rollover images work for me in IE10. The broken image picture that you uploaded looks a bit "Chromey" to me - is that what's happening for you in Chrome?
If it is, I've seen it too on a few websites and the images always come back once you do a refresh. I'm not entirely sure why it happens (maybe they get corrupted in the cache? or don't download fully?) but it seems to happen more often on large/unoptimised images. I know that doesn't help because yours are neither.
Can I make a suggestion? There's actually a really easy fix - You can eliminate the problem entirely if you use CSS instead.
Just put this in the <head> section of the web page;
Code:
<style type="text/css">
.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}
.greyButton:hover {
background:#ccc;
}
</style>
and replace this;
Code:
<a href="product-page-list.php?catID=8" onmouseout="MM_swapImgRestore();MM_nbGroup('out')" onmouseover="MM_nbGroup('over','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s2.jpg','images/2013prodSelect/PRODUCTS1_r1_c4_s4.jpg',1);MM_swapImage('PRODUCTS1_r1_c3_s1','','images/2013prodSelect/PRODUCTS1_r1_c3_s7.jpg',1);" onclick="MM_nbGroup('down','navbar1','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s3.jpg',1);"><img name="PRODUCTS1_r1_c4_s1" src="images/2013prodSelect/PRODUCTS1_r1_c4_s1.jpg" width="232" height="90" border="0" id="PRODUCTS1_r1_c4_s1" alt="" /></a>
with;
Code:
<a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a>
Note the class in red that is used in the CSS.
Much easier to understand (both for you and search engines) and better for SEO since the link uses descriptive text in the <a> tag which provides a meaningful cue for Google bots (search engines don't see images and therefor cannot read text that is embedded inside them). It also looks a lot crisper and will work even if JavaScript is turned off in the browser.
Here's the complete code for your page with the alterations in place;
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PRODUCTS1.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Apr 03 20:56:16 GMT+0100 (GMT Daylight Time) 2013-->
<script language="JavaScript1.2" type="text/javascript">
<!--
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
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];}}
}
//-->
</script>
<style type="text/css">
.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}
.greyButton:hover {
background:#ccc;
}
</style>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('PRODUCTS1_r1_c1_s2.jpg','PRODUCTS1_r1_c1_s4.jpg','PRODUCTS1_r1_c1_s3.jpg','PRODUCTS1_r1_c3_s2.jpg','PRODUCTS1_r1_c4_s2.jpg','PRODUCTS1_r1_c4_s4.jpg','PRODUCTS1_r1_c4_s3.jpg','PRODUCTS1_r1_c3_s7.jpg','PRODUCTS1_r3_c1_s2.jpg','PRODUCTS1_r3_c1_s4.jpg','PRODUCTS1_r3_c1_s3.jpg','PRODUCTS1_r1_c3_s3.jpg','PRODUCTS1_r3_c4_s2.jpg','PRODUCTS1_r3_c4_s4.jpg','PRODUCTS1_r3_c4_s3.jpg','PRODUCTS1_r1_c3_s8.jpg','PRODUCTS1_r5_c1_s2.jpg','PRODUCTS1_r5_c1_s4.jpg','PRODUCTS1_r5_c1_s3.jpg','PRODUCTS1_r1_c3_s4.jpg','PRODUCTS1_r5_c4_s2.jpg','PRODUCTS1_r5_c4_s4.jpg','PRODUCTS1_r5_c4_s3.jpg','PRODUCTS1_r1_c3_s9.jpg','PRODUCTS1_r7_c1_s2.jpg','PRODUCTS1_r7_c1_s4.jpg','PRODUCTS1_r7_c1_s3.jpg','PRODUCTS1_r1_c3_s5.jpg','PRODUCTS1_r7_c4_s2.jpg','PRODUCTS1_r7_c4_s4.jpg','PRODUCTS1_r7_c4_s3.jpg','PRODUCTS1_r1_c3_s10.jpg','PRODUCTS1_r9_c1_s2.jpg','PRODUCTS1_r9_c1_s4.jpg','PRODUCTS1_r9_c1_s3.jpg','PRODUCTS1_r1_c3_s6.jpg','PRODUCTS1_r9_c4_s2.jpg','PRODUCTS1_r9_c4_s4.jpg','PRODUCTS1_r9_c4_s3.jpg','PRODUCTS1_r1_c3_s11.jpg');">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="980">
<!-- fwtable fwsrc="PRODUCTS.png" fwpage="Page 1" fwbase="PRODUCTS1.jpg" fwstyle="Dreamweaver" fwdocid = "559381124" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="515" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2">
<a href="product-page-list.php?catID=2" class="greyButton">HOMEWARE</a>
</td>
<td rowspan="10"><img name="PRODUCTS1_r1_c3_s1" src="PRODUCTS1_r1_c3_s1.jpg" width="515" height="450" border="0" id="PRODUCTS1_r1_c3_s1" alt="" /></td>
<td rowspan="2"><a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=1" class="greyButton">CUSHIONS</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=4" class="greyButton">GLASSWARE</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=3" class="greyButton">FURNITURE</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=5" class="greyButton">PICTURE<br/>FRAMES</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=6" class="greyButton">CANDLES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=9" class="greyButton">CARDS</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=7" class="greyButton">HOME<br/>FRAGRANCES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=10" class="greyButton">FLORAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
Just drop that into a test page to see the effect in action.
disjointed rollerover over while down showing blank image
Reply With Quote
Originally Posted by Beverleyh
Bookmarks