Tweet
The following code works on IE but not FF. I think is z-index problem but i'm not sure. This is a map on a layer that display things. Note: mm.gif is a transparent image, so it can be used as a map and still the content below can be seen. Thank you very much.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test on FireFox</title>
<script type="text/javascript">
function b(num)
{
document.getElementById("myLayer").innerHTML=num;
}
</script>
</head>
<body>
<div id="myLayer" style="width:500;height:500;position:absolute;left:275px; top:15px;"></div>
<div align="center">
<table border="1" width="37%" id="table1" cellspacing="0" cellpadding="0">
<tr><td>
<p align="center">
<map name="mapDiv" id="mapDiv">
<area shape="rect" coords="0,0,250,250" onmouseover="b(1);">
<area shape="rect" coords="250,0,500,250" onmouseover="b(2);">
<area shape="rect" coords="0,250,250,500" onmouseover="b(3);">
<area shape="rect" coords="250,250,500,500" onmouseover="b(4);">
</map><img border="0" src="images/mm.gif" width="500" height="500" ismap usemap="#mapDiv"></td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test on FireFox</title>
<script type="text/javascript">
function b(num)
{
document.getElementById("myLayer").innerHTML=num;
}
</script>
</head>
<body>
<div id="myLayer" style="width:500;height:500;position:absolute;left:275px; top:15px;"></div>
<div align="center">
<table border="1" width="37%" id="table1" cellspacing="0" cellpadding="0">
<tr><td>
<p align="center">
<map name="mapDiv" id="mapDiv">
<area shape="rect" coords="0,0,250,250" onmouseover="b(1);">
<area shape="rect" coords="250,0,500,250" onmouseover="b(2);">
<area shape="rect" coords="0,250,250,500" onmouseover="b(3);">
<area shape="rect" coords="250,250,500,500" onmouseover="b(4);">
</map><img border="0" src="images/mm.gif" width="500" height="500" ismap usemap="#mapDiv"></td>
</tr>
</table>
</div>
</body>
</html>
Comment