PDA

View Full Version : question on image map



teppanyakiboyz
04-22-2007, 04:39 AM
sorry for previous post on morzilla vs IE. i've changed my way of showing my page. im now using image map to list my item.

When i mouseover the an area, it show a submenu. but when i wan to move over to the submenu to click to href to another page, the submenu is hidden. coz my mouse went out of the coords.

how can i maintain the submenu? only hide when im out of the coord n the submenu.

pls guide. thank u..
below are my script:

<html>
<head>

<img src="Frozen_level.gif" alt="froze" name="froze"
width="350" height="500"
style="
position: absolute;
top: 1px;
left: 221px;
border: none;
visibility: hidden;"
usemap="#frozemap">


<script type="text/javascript">
function mouseover(froze)
{ froze.style.visibility ="visible" }
function mouseout(froze)
{ froze.style.visibility ="hidden" }

</script>
</head>

<body>
<img src="toplevel.gif" width="200" height="500" alt="gross"
style="
position: absolute;
top: 0px;
left: 20px;
border: none";
usemap="#toplevelmap">

<map id="toplevelmap" name="toplevelmap">
<area shape ="rect" coords ="0,133,198,174" onmouseover="mouseover(froze)" onmouseout="mouseout(froze)">
</map>

<map id="frozemap" name="frozemap">
<area shape ="rect" coords ="192,133,340,174"
href="showy.php?product_id="1000" target="showframe1" alt="1000">
<area shape ="rect" coords ="192,244,340,281"
href="showy.php?product_id="1001" target="showframe1" alt="1001">
<area shape ="rect" coords ="192,315,340,355"
href="showy.php?product_id="1003" target="showframe1" alt="1003">
<area shape ="rect" coords ="192,370,340,410"
href="showy.php?product_id="1004" target="showframe1" alt="1004">
<area shape ="rect" coords ="192,425,340,465"
href="showy.php?product_id="1005" target="showframe1" alt="1005">
</map>

</body>
</html>

jscheuer1
04-22-2007, 07:00 AM
Your code looks a bit confused and as if some parts are missing. But, the trick here is to delay the disappearance of the submenu via a setTimeout and then cancel the timeout if the submenu is moused over. To round it out, the submenu itself must have the same onmouseout event as the coords do, something like:


For both the coords and the submenu:

onmouseout="killsub=setTimeout("mouseout(froze)",1000);"

For the submenu:

onmouseover="if(killsub){clearTimeout(killsub)};"