Javascript overlap divs with links - flickering problem

[asiarlis]

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

 

[BabyJeffy]

What I use is a timer. When the user mouses out, I start a timer (usually set to a low figure like 100ms) which I cancel if I move back into the same object... but that performs the usual hide_box() kind of routine otherwise (just delayed by 100ms). The onmouseover needs to cancel this timer and do it's own setup as needed.

Flicker may still occur, but can be controlled somewhat.

Investigate setTimeout() and clearTimeout() if you want to pursue this kind of approach.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

You also need to take care about the coordinates in your image map. I've zoomed into it, and found that some of them (including the 4 you're having problems with) overlap, so I'd expect you to see erroneous flickering behaviour.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

asiarlis,

Did fixing the overlapping areas solve the problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[asiarlis]

I would like to thank you for your interesting BillyRayPreachersSon.
The answer is no i didn’t achieve to find an elegant solution but I made one that works. But is little bit CPU “hungry” solution.

Open your task manager and move the cursor quickly over the map .. You will see what I mean. I hope to find an elegant solution …… some day ?

You can view an online example at the following link:

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