Onmouseover div swap gives flickering effect

**JanDeGroot** · 01-18-2008, 02:28 PM

I want to replace a div onmouseover by another div. The replacement takes place, but the div is flickering onmouseover. Why is that and how should I change my source code?

The jscript:

Code:

 
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>

The divs:

Code:

 
<div class="menuiteminactief" id="contactout" onmouseover="HideDIV('contactout');DisplayDIV('contact')"><a href="contact.html" class="menu1">Contact</a></div>
<div class="menuitemactief" id="contact" style="display:none;" onmouseout="HideDIV('contact');DisplayDIV('contactout')">
<a href="contact.html" class="menu1" onmouseover="changeBg('contact','2')" onmouseout="changeBg('contact','1')">Contact</a><br>
<a href="contact.html" class="menu2" onmouseover="changeBg('contact','3')" onmouseout="changeBg('contact','1')">Verslagen</a><br>
<a href="contact.html" class="menu2" onmouseover="changeBg('contact','4')" onmouseout="changeBg('contact','1')">Lid worden</a><br>
<a href="contact.html" class="menu2" onmouseover="changeBg('contact','5')" onmouseout="changeBg('contact','1')">Andere vraag</a>
</div>

The complete code:
http://www.zuidamerika.net/ftcw2008/index_menutest.html

**chrishirst** · 01-18-2008, 03:18 PM

change class names instead of backgrounds.

**JanDeGroot** · 01-19-2008, 03:33 PM

I'm sorry, does'nt work. I removed the 'change-background' script but the flickering effect is still there.

Code:

 
<a href="contact.html" class="menu1">Contact</a><br>
<a href="contact.html" class="menu2">Verslagen</a><br>
<a href="contact.html" class="menu2">Lid worden</a><br>
<a href="contact.html" class="menu2">Andere vraag</a>

The complete code:
http://www.zuidamerika.net/ftcw2008/index_menutest.html

**svirid** · 01-19-2008, 09:22 PM

I am a little confused here what are u trying to do but I think the problem is with your 'A' DOM elements inside the DIV.
What hapends is that u have mouseout event on your DIV and when u mouse over on A element mouseout fires on DIV even that A tag located inside the DIV.

The easies way what u can do is to define event for the A tag on mouseover and cacel all of the following events.

set <a mosuseover="test(event)">Contact</a>

test = function(event) {
if(event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}