[JS] onmouseout mi blocca con gli <a>

Ciao , ho creato questo script per visualizzare un menu :

Codice HTML:

---

<a href="?p=home" onfocus="blur()" onmouseover="document.getElementById('menu_home').style.display='';">Home</a>


<div id="menu_home" style="position:absolute; width:105px; height:120px; z-index:1; left: 533px; top: 260px; display:none; background-image: url(images/sottomenu.gif); color:#FFFFFF; text-align:center;" onmouseout="document.getElementById('menu_home').style.display='none';">
        <br />
                <a href="?p=home">Home</a><br />
                <br />
        <a href="?p=chisiamo">Chi siamo</a><br />
        <br />
        <a href="?p=perche">Perch&egrave;</a><br />
        <br />
      </div>

---

Purtroppo quande devo cliccare sul link il menu mi scompare :D
Qualcuno sa dirmi come posso risolvere per piacere ^^ ?
Grazie .

E' normale.
Il meccanismo dell'event bubbling da comprendere per controllare meglio gli eventi è che:
- un div padre menu_home gestisce l'evento onmouseout (nel tuo caso, gestisce solo questo ed è qui l'errore, ma procediamo..)
- un elemento figlio del div quando il mouse si posiziona su di lui, per quanto contenuto nel padre, fa scattare l'evento onmouseout del div padre
- immediatamente dopo, visto che il figlio NON gestisce un proprio onmouseOVER viene richiesto di gestirlo ai suoi "avi" (ancestors, il padre, nonno etc.. in sopra) quindi al div padre che PERO' nel tuo caso non gestisce un evento onmouseover quindi il div rimane nascosto.

Risolvi gestendo entrambi gli eventi dal div padre.
Eh sì perché il link che fa visualizzare il div padre menu_home è un LINK che NON è padre a sua volta di menu_home quindi l'evento onmouseover di cui sopra va a finire in su fino al body che non se ne fa nulla e nulla accade

OK?

(ci ho penato pure io :wink:)

edit:
Un ultimo consiglio? non scrivere direttamente il codice negli event handler.
Per capirci non:
onmouseover="document.getElementById('...."

bensì qualcosa di più gestibile e ordinato anche riguardo gli stili, tipo:
<div id="menu_home" class="menu1" onmouseover="showMenu('menu_home', true)" onmouseout="showMenu('menu_home', false)">

giusto per fare un esempio, poi gli stili della class "menu1" te li definisci in un css, stessa cosa con le funzioni javascript in un file js.
Altrimenti viene fuori una porcata con vita propria :) difficile da controllare

ciao

:D grande !
Come posso risolvere ?

Eh sì
mi sono accorto di esser stato troppo generico e ho aggiunto parecchie righe in più nel post di sopra ;)
E' fondamentale cmq che tu abbia bene in mente il meccanismo dell'"event bubbling"

E' possibile comprendere anche i "figli" del div in qualche modo ? (ho provato come hai suggerito tu ma non riesco a farlo andare , e non mi da errori xD)

Dunque i figli GIA' sono compresi nel div, è il padre div che deve gestire ENTRAMBI gli eventi mouseover/out.

Guarda io ho buttato giù un pezzo di script completo solo per quel che riguardava il mio consiglio (function js, stili css a parte, meglio se entrambi li metti in file .js e .css a parte). E questo è il codice ancora da perfezionare (perché molto fedele ancora alla tua struttura iniziale che dovrei ancora capire bene):

Codice HTML:

---

<style type="text/css">
.menu1 {
        position:absolute;
        width:105px;
        height:120px;
        z-index:1;
        left: 533px;
        top: 260px;
        display:none;
        background-image: url(images/sottomenu.gif);
 background-color: white;
        color:#FFFFFF;
        text-align:center;
}
</style>

<script type="text/javascript">
function showMenu(elem_id, shown){
 var el = document.getElementById(elem_id);
 if (el){
  el.style.display = (shown)? 'block' : 'none';
 }
}
</script>

<a href="?p=home" onfocus="blur()" onmouseover="showMenu('menu_home', true)">Home</a>
<div id="menu_home" class="menu1" onmouseout="showMenu('menu_home', false)" onmouseover="showMenu('menu_home', true)"> 
<br /> 
<a href="?p=home">Home</a><br />
<br /> 
<a href="?p=chisiamo">Chi siamo</a><br />
<br />
<a href="?p=perche">Perch&egrave;</a><br />
<br /> 
</div>

---

Quello che non mi piace:
le coordinate assolute in pixel.. difficile farle quadrare

Quel che proprio non ho capito:
perché c'è un link a parte "Home" che passandoci sopra mostra un div posizionato in assoluto con dentro ripetuto un link Home... boh Perché il primo elemento del menu che appare equivale al link che lo fa comparire?
ci saranno altri menu che dovranno comparire giusto? se sì meglio che cerchi su google "dropdown menu" ce ne sono a migliaia con struttura dhtml fatta come si deve e conviene.

Wow ! Grazie 1000^100 :D

La dimensione in pixel : l'ho scelta come base , pensavo alle percentuali o agli em ma mi incasinavo con il mio wysiwyg :P
Il menu con Home : ho messo href="javascript:void(0)" , prima non ne sapevo l'esistenza e senza href non mi dava purtroppo l'amata "manina" dei link ^_^ (odio cambiare i cursori con i css se non necessario °.°)