View Full Version : Javascript overlap divs with links - flickering problem

06-11-2007, 02:18 PM

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,30 4,24,308,22,307,15,309,7,
onmouseover="alter_map('Ν.ΕΒΡΟΥ','13 ΔΗΜΟΙ / ΚΟΙΝΟΤΗΤΕΣ', 'evros');"

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:


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

06-11-2007, 02:44 PM
I have been getting the same annoying flicker under similar circumstances. I have a word with a link like this:

<a href="#" onmouseover="showItem('noUnderline');" onmouseout="hideItem('noUnderline');">[Why?]</a>),

Again, a div is shown or hidden. The strange thing is that one such linked word behaved perfectly, but another, apparently similar, flickers on some, but not all, occasions.

I found that the reason is that on the flickering occasion, the shown div appears over the link word, thus the focus is lost. Where the div does not cover the link word, there is no problem. I have only just established this, so I have not fixed it yet, but I guess that I will have to revert to using a click on the div to close it rather than onmouseout.

John Rostron

06-11-2007, 03:01 PM
I would like to thank you for your post .. But i think the best sollution is to use the onmouseout event since i have too many shape-maps to show. It will be very anoying each time the user has to click over the shaded part in order to close it.

I hope to find a sollution as soon as possible......

06-12-2007, 12:15 PM
I have solved my flickering problem, using the FindPos originally written by Peter Paul Koch, and modified by Alex Tingle. I use this to bring up a definition box when the user moves the mouse over a Glossary word, or other word that needs explanation.

First the Javascript Code for finding the mouse X position:

// Find Mouse Position
// by Peter-Paul Koch,
// http://www.quirksmode.org/js/findpos.html
// modified by Alex Tingle
// http://blog.firetree.net/2005/07/04/javascript-find-position

function findPosX(obj)
var curleft = 0;
curleft += obj.offsetLeft;
obj = obj.offsetParent;
else if(obj.x)
curleft += obj.x;
return curleft;

Now my Javascript to react to the events:

// Functions to show and hide Glossary Items
function showGlossItem(divID, obj) {
refID = document.getElementById(divID);
var xPos = findPosX(obj);
if (xPos < 400)
refID.style.left = '500px';
refID.style.left = '100px';
refID.style.display = "block";
return false;

function hideGlossItem(divID) {
refID = document.getElementById(divID);
refID.style.display = "none";
refID.style.left = '200px';

I set the box to the left or right of the window, hopefully avoiding the original item clicked. On hiding the box, it is reset to the original 200px.

Then the default styles for my divs

.glossItem { display: none; top:100px; left: 200px; width: 300px;
position:fixed; border:2px solid black; padding: 1em;
text-align: left; background-color: #FFFFF0;

And a typical usage:

<a href="#" onmouseover="showGlossItem('noUnderline',this);" onmouseout="hideGlossItem('noUnderline');">[Why?]</a>),

In this case, it is explaining why you should avoid using underlines.

This code is on a University VLE, and is not visible from outside.

John Rostron

06-14-2007, 01:02 PM
I have found a general solution to the flickering problem. I found a CSS trick at:

This was for showing a tooltip as you hovered over a link. The tooltip text was included within a <span> element within the link, and was a purely CSS solution.

I wanted to use this as an active glossary, so that a definition appeared in a floating box when you hovered over the highlighted word. I modified this so that the span contained a keyword. I then used a Javascript function to populate the span, replacing the keyword with the definition.

I also had to modify the CSS, because the default behaviour from FijiWeb somtimes has the floating text sticking out beyond the readable area.

The CSS code is:

a span { display: none; }
a:hover span {
display: block;
font-weight: normal; color: black;
top:100px; left: 200px; width: 300px;
width: 300px;
padding: 1em; z-index: 100;
background: #FFC; border: 1px solid black;

Note that I removed the a:hover {position: relative} style, so that the absolute positioning is with respect to the main text container.

The definitions are held in an array, which can be augmented for individual pages). The spans are then populated with this function which is included within the body.onload function.

var defs = new Array();
defs['undefined'] = "<p>This item is not defined</p>";
// These definitions can be augmented on a page basis.

function setSpans() {
var spanList = document.getElementsByTagName('span');
for (k = 0; k < spanList.length; k++) {
if ( spanList[k].parentNode.nodeName.toUpperCase() == "A" ){
spanList[k].innerHTML = defs[spanList[k].innerHTML];

At present there is no error checking that might occur. Any unrecognized keyword will be replaced by the 'undefined' definition given above.

The popin definitions now behave themselves. Even if they overlap the original link word, they do not disappear until you mouse out of the link word area. And they do not flicker!

John Rostron