Javascript overlap divs with links - flickering problem

Discussion in 'JavaScript' started by asiarlis, Jun 11, 2007.

  1. #1
    Javascript

    I have built a map with html image maps and javascript. Javascript used to show and hide images, divs while the cursor pointed over a specific area of the map.

    For example when the user places the cursor onto Prefecture of Samothraki Greece a Div revealed with info of how many Municipalities exists at the specific Prefecture and a div witch contains a graphic overlaps the specific area (shade).

    I use onmouseOver and onmouseOut events of javascript. The problem is if I place both events at tag <area>:


    <area shape="poly" coords= "286,25,288,31,286,33,287,36,284,41,275,47,278,55,264,65,263,76,271,82,289,61,300,43,298,36,298,29,304,24,308,22,307,15,309,7,
    306,6,302,7,296,5,292,1,288,4,295,14,294,23,287,25,286,25"
    href="javascript:void(0)"
    onmouseover="alter_map('Ν.ΕΒΡΟΥ','13 ΔΗΜΟΙ / ΚΟΙΝΟΤΗΤΕΣ', 'evros');"
    onmouseout="hide_box('map_info','evros');"
    alt="Ν.ΕΒΡΟΥ"/>


    An annoying flickering produced.

    In case of placing the onmouseOut event onto the div that revealed and contains the graphic for specific area (shade) everything seems to be ok. But when I move quickly the cursor over the map some parts stay shaded and the info box not hide

    Is there any solution to place both events, onmouseOver and onmouseOut, at tag <area> avoiding mouse and image flickering ???

    Online link:

    http://test.metroweb.gr/map/mp.php

    At the upper right corner of map(the first 4 parts) both events placed at tag <area> this is the problem. The rest of the map works by applying the onmouseout event at the revealed div that contains the shade graphic but when the cursor quickly over the map some parts stay shades and the info div not hide.

    Thanks in advanced
    Any help will be appreciated
     
    asiarlis, Jun 11, 2007 IP