Results 1 to 2 of 2

Thread: question on image map

  1. #1
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default question on image map

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    Code:
    onmouseout="killsub=setTimeout("mouseout(froze)",1000);"
    For the submenu:
    Code:
    onmouseover="if(killsub){clearTimeout(killsub)};"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •