Hi y'all, I'm trying to get a rollover menu to show on a page that has a zoomify. The code (ugly, yes, I know) is below, but you can also see it NOT work properly at: http://lektrikpuke.com/test/zoomify.htm The rollover on the left is hidden by the zoomify. <html> <head> <meta http-equiv="Content-Language" content="en-us"> <base href="http://www.lektrikpuke.com/"> <style> <!-- a:link {color: #686964; text-decoration: none;} a:visited {color: #686964; text-decoration: none;} a:active {color: #686964; text-decoration: none;} a:hover {color:#686964; text-decoration: underline;} //--> </style> <script language="JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <script language="JavaScript"> <!-- function pviiW3Cbg(obj, pviiColor) { obj.style.backgroundColor=pviiColor } var nn4 = (document.layers) ? true : false var ie = (document.all) ? true : false var dom = (document.getElementById && !document.all) ? true : false function browser(id){ if(nn4) { path = document.layers[id] }else if(ie) { path = document.all[id] }else{ path = document.getElementById(id) } return path } function hideAllLayers(layerName){ var layer = browser(layerName) if(nn4){ layer.visibility = "hidden" }else{ layer.style.visibility = "hidden" } } function showLayer(layerName){ var layer = browser(layerName) if(nn4){ layer.visibility = "visible" }else{ layer.style.visibility = "visible" } } //--> </script> <style type="text/css"> <!-- .style1 {font-size: x-small} .style2 {font-size: x-small} //--> </style> </head> <body> <div align="center"> <table width="831" id="table1" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td height="2"> <div align="center" style="position: absolute; z-index: 100; visibility:visible"> <table border="0" width="802" id="table13" cellpadding="0" style="border-collapse: collapse"> <tr> <td width="5" bgcolor="#E7E3D6"> </td> <td bgcolor="#7F7562"> </td> <td height="50" align="right" bgcolor="#7F7562"> </td> <td align="right" bgcolor="#7F7562"> </td> <td width="5" bgcolor="#E7E3D6"> </td> </tr> <tr> <td width="5" height="3"></td> <td colspan="3" height="3"></td> <td width="5" height="3"></td> </tr> <tr> <td width="5" bgcolor="#7F7562"> </td> <td colspan="3"> <table border="0" id="table17" bgcolor="#E7E3D6" cellpadding="0" style="border-collapse: collapse" width="100%"> <tr> <td align="center" height="18"> <div align="center"> </div></td> <td align="center" height="18" width="77"> <a href="http://link"> <img src="http://www.lektrikpuke.com/test/topbordertype.jpg" border="0" onMouseOver="showLayer('typemenu1')" onMouseOut="hideAllLayers('typemenu1')" ></a></td> <td bgcolor="#7F7562" width="2"> </td> <td width="545"> </td> <td bgcolor="#7F7562" width="2"> </td> <td align="center" height="18" width="77"> <div align="center"> <a href="http://link"> <img src="http://www.lektrikpuke.com/test/topborderrods.jpg" border="0" onMouseOver="showLayer('rodsmenu1')" onMouseOut="hideAllLayers('rodsmenu1')"></a></div></td> <td bgcolor="#7F7562" width="2"> </td> <td align="center" height="18" width="77"> <div align="center"> </div></td> <td align="center"> </td></tr> </table></td> <td width="5" bgcolor="#7F7562"></td> </tr> <tr> <td width="5" bgcolor="#7F7562"></td> <td colspan="3" bgcolor="#E7E3D6" height="3"> </td> <td width="5" bgcolor="#7F7562"></td> </tr> <tr> <td width="5" height="3"></td> <td colspan="3" height="3"></td> <td width="5" height="3"></td> </tr> <tr> <td width="5" bgcolor="#E7E3D6"> </td> <td colspan="3" bgcolor="#7F7562"> </td> <td width="5" bgcolor="#E7E3D6"> </td> </tr> <tr> <td width="5" height="2"></td> <td colspan="3" height="2"> </td> <td width="5" height="2"></td> </tr> </table> <div id="typemenu1" style="border-width:1px; border-style:solid; position:absolute; width:159px; height:199px; left: 1px; top: 81px; background-color #e7e3d6; visibility:hidden; z-index:1; border-top-style:solid; border-bottom-style:solid" onMouseOver="showLayer('typemenu1')" onMouseOut="hideAllLayers('typemenu1')"> <div align="center"> <TABLE WIDTH="100%" BORDER="0" bgcolor="#E7E3D6" style="border-style:solid; border-width:0; "> <TR> <TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="181"> <font face="Verdana" size="1"> <a href="http://link">Tailored</a> </font></TD></tr> <tr> <TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="196" height="15"> <font face="Verdana" size="1"> <a href="http://link">Tab Tops</a> </font></TD> </TR> <TR> <TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="181"> <font face="Verdana" size="1"> <a href="http://link">Pinch Pleats</a> </font></TD> </tr> </TABLE> </div> </div> <div id="rodsmenu1" style="border-width:1px; border-style:solid; position:absolute; width:158px; height:68px; left: 631px; top: 81px; background-color #e7e3d6; visibility:hidden; z-index:1; border-top-style:solid; border-bottom-style:solid" onMouseOver="showLayer('rodsmenu1')" onMouseOut="hideAllLayers('rodsmenu1')"> <div align="center"> <TABLE WIDTH="100%" BORDER="0" bgcolor="#E7E3D6"> <TR> <TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="181"> <font face="Verdana" size="1"> <a href="http://link">All Rods (NEW)</a></font></TD></tr> <tr><TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="196"> <font face="Verdana" size="1"> <a href="http://link">Wooden Rods</a></font></TD> </TR> <TR> <TD ALIGN="left" VALIGN="middle" ONMOUSEOVER="pviiW3Cbg(this, '#e7e3d6')" ONMOUSEOUT="pviiW3Cbg(this, '#e7e3d6')" WIDTH="181"> <font face="Verdana" size="1"> <a href="http://link">Decorative Rods</a></font></TD> </tr> </TABLE> </div> </div> </div> <div align="center" style="position: absolute; top: 145px; z-index:0; visibility:visible; left:89px"> <table border="0" cellpadding="0" height="100%" width="802" style="border-collapse: collapse" bordercolor="#111111" id="table22"> <tr> <td width="170" bgcolor="#e7e3d6" bordercolor="#686964" style="border-bottom-style: none; border-bottom-width: medium"> <p> <OBJECT CLASSID="clsid27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="theMovie" WIDTH="455" HEIGHT="574" ID="theMovie"> <PARAM NAME="FlashVars" VALUE="zoomifyImagePath=http://www.lektrikpuke.com/test/zoom_ava_duvet_croscill_bedding/&zoomifyX=0.0 &zoomifyY=0.0&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1"> <PARAM NAME="src" VALUE="http://www.lektrikpuke.com/test/zoomifyViewer.swf"> <EMBED FlashVars="zoomifyImagePath=http://www.lektrikpuke.com/test/zoom_ava_duvet_croscill_bedding/&zoomifyX=0.0&zoomifyY=0.0 &zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1" SRC="zoomifyViewer.swf" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="455" HEIGHT="574" NAME="theMovie"></EMBED></OBJECT> </td></tr> </table> </div> </td> </tr> </table> </div> </body> </html>
Isn't this a CSS issue? I've tried enclosing the zoomify in a cell that had a z-index of -1 (or 0), and didn't help. Doesn't anyone have a clue how I can fix this?