[CSS/JS] Layer triggered onMouseOut te vroeg

[RvdH]

Beste,

Ik heb een aantal menu items in divjes staan, deze divjes zitten bij elkaar in een andere div. Nu wil ik het dus zo doen dat zodra de muis uit die laatste div gaat, de visibility van die div op hidden wordt gezet.

Het hiden van de layer gaat op zich goed, maar het gebeurt veels te vroeg. Als men over de layer gaat dropt het menu naar beneden, maar zodra je de muis ook naar beneden over het menu gaat bewegen, dan fired de onMouseOut al, en verdwijnt het menu voordat je er in kunt gaan met de muis.

Hier is de code voor de menu's:

PHP:

<div id="menu" style="z-index: 1;">
    <div id="InventoryMenu" style="z-index: 2" onMouseOut="hide('InventoryItems')">
        <!-- Inventory Menu -->
        <div id="InventoryItems" style="z-index: 3; position: absolute; visibility: <? if ($str != "ns4") { echo "hidden"; } else { echo "hide";} ?>; top: 111px; left: <? echo($str_left); ?>px; width: 160px; height: 160px;">
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="<? echo(GetParameter("LINK.Featured")); ?>">Featured</a></div>
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="<? echo(GetParameter("LINK.New additions")); ?>">New Additions</a></div>
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="catalogues.php">All catalogues</a></div>
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="<? echo("results.php?s_CriteriaAlias=SALEBOOKCRITERIA&s_PresetName=SALE%20BOOKS"); ?>">Sale Books</a></div>
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="publications.php">New Publications</a></div>
            <div style="z-index: 4" class="mn-i"><a class="nodeco" href="search.php">Advanced Search</a></div>
        </div>
    </div>
    <div id="AboutusMenu" style="z-index: 2">
        <!-- about us -->
        <div id="AboutusItems" style="position: absolute; visibility: <? if ($str != "ns4") { echo "hidden"; } else { echo "hide";} ?>; top: 111px; left: <? echo($str_left1); ?>px; width: 160px; height: 114px; "> 
            <div class="mn-i"><a class="nodeco" href="okpress.php">Oak Knoll Press</a></div>
            <div class="mn-i"><a class="nodeco" href="okbooks.php">Oak Knoll Books</a></div>
            <div class="mn-i"><a class="nodeco" href="news.php">News</a></div>
            <div class="mn-i"><a class="nodeco" href="virtual.php">Virtual Tour</a></div>
                <div class="mn-i"><a class="nodeco" href="associations.php">Associations</a></div>
                <div class="mn-i"><a class="nodeco" href="biblioresource.php">Bibliophile resources</a></div>
        </div>
    </div>
    <div id="ContactMenu" style="z-index: 2">
        <!-- contact --> 
        <div id="ContactItems" style="position: absolute; visibility: <? if ($str != "ns4") { echo "hidden"; } else { echo "hide";} ?>; top: 111px; left: <? echo($str_left2); ?>px; width: 140px; height: 38px; "> 
            <div class="mn-i"><a class="nodeco" href="staff.php">Staff directory</a></div>
            <div class="mn-i"><a class="nodeco" href="visiting.php">Visiting Oak Knoll</a></div>
        </div>
    </div>
</div>

(b.v.) InventoryItems wordt op visible gezet als men over de menubar beweegt:

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0" background="./images/back.gif">

  <tr background="./images/back.gif"> 

    <td height="33" align="right">[img]"./images/divide.gif"[/img]
<a href="./" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image7','','./images/home2.gif',1)">[img]"./images/home.gif"[/img]</a>
<a onMouseOver="show('InventoryItems')" href="inventory.php">[img]"./images/inventory.gif"[/img]</a>
<a href="aboutus.php" onMouseOver="show('AboutusItems')">[img]"./images/about.gif"[/img]</a>
<a href="contact.php" onMouseOver="show('ContactItems')">[img]"./images/contact.gif"[/img]</a>
<a href="signin.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','./images/sign2.gif',1)">[img]"./images/sign.gif"[/img]</a> 

    </td>

  </tr>

 </table>

Nu kan ik met de muis wel in het 1ste item van een menu komen, maar zodra ik naar de tweede beweeg dan triggered de onMouseOut.

Waarom doet hij dit, en hoe kan ik het oplossen? Ik heb allemaal verschillende volgordes van z-index geprobeerd, wat niet hielp, en de grootte van de container layers aanpassen had ook geen effect.. met een border eromheen zijn ze ook groot genoeg.

Help!

[ Voor 27% gewijzigd door RvdH op 05-09-2003 12:19 ]

[whoami]

CSS en JS horen thuis in W&G, niet in P&W.
Zie de forumdescr enzo.

P&W -> W&G

[crisp]

event propagation stoppen op het moment dat de mouseover van een menuitem getriggerd wordt.
Je zou ook met een timer kunnen werken, en die onmouseover van een menu-element kunnen cancellen.

[RvdH]

Hoezo, JavaScript is toch zeker webscripting?
nm, ik heb die beschrijvingen nog nooit aangehad.

[ Voor 40% gewijzigd door RvdH op 05-09-2003 12:24 ]

[RvdH]

crisp schreef op 05 September 2003 @ 12:22:
event propagation stoppen op het moment dat de mouseover van een menuitem getriggerd wordt.

Klinkt interessant, hoe doe ik dat?

[crisp]

strlen schreef op 05 September 2003 @ 12:22:
Hoezo, JavaScript is toch zeker webscripting?

De splitsing W&G P&W is wb scripting gemaakt op basis van client-side en server-side scripting; dat staat ook in de P&W FAQ

strlen schreef op 05 september 2003 @ 12:23:
[...]

Klinkt interessant, hoe doe ik dat?

Door te gaan zoeken op event-handling (let daarbij op dat er verschillende event-modellen bestaan voor verschillende browsers )

[ Voor 30% gewijzigd door crisp op 05-09-2003 12:25 ]

[RvdH]

crisp schreef op 05 September 2003 @ 12:23:
Door te gaan zoeken op event-handling (let daarbij op dat er verschillende event-modellen bestaan voor verschillende browsers )

Heb je misschien een linkje naar de javascript documentatie van Explorer, want in het doolhof der Microsoft sites kan ik het niet vinden. Mozilla/NS weet ik wel..

[crisp]

strlen schreef op 05 September 2003 @ 12:26:
[...]

Heb je misschien een linkje naar de javascript documentatie van Explorer, want in het doolhof der Microsoft sites kan ik het niet vinden. Mozilla/NS weet ik wel..

Ik geef je een paar zoekwoorden: attachEvent, cancelBubble en event.returnValue
dat is voor het IE5+ eventmodel; IE4 kent geen event bubbling

[RM-rf]

MSDN Lib > Web Development > HTML & Dynamic HTML > SDK Documentation > Reference

dit is ook een handig artikel:
Understanding the Event Model