Gestire onmouseover e onmouseout

[Ht28]

Ho questo codice che come metto il mouse sul link fa apparire la finestrella popup, però quando tolgo il mouse la finestrella non scompare.
Sò che ci vuole onmouseout per farla scomparire ma non so dove metterlo.

©Copyright

[H5N1_Aviaria]

Se hai un attimo di pazienza ti spiego come utilizzare al meglio la gestione degli eventi.

Innanzitutto (lo so che non è necessario, ma mi piacciono le cose fatte per benino) cerchiamo di separare il codice (X)HTML dalla gestione degli eventi.

So che sei alle prime armi se no non avresti posto il quesito, ma cercherò di essere più chiaro possibile e chissà che alla fine tu non ne tragga qualcosa di buono!

Prendiamo il tuo codice:

<a class="gray" href="#" onmouseover="document.getElementById('chiudi-\
Copyright').style.display='block';document.getElementById('popup-\
Copyright').style.display='block';">
© Copyright
</a> 

ed assegnamo all'elemento a un id (per andarlo ad individuare con esattezza) e togliamo qell'orribile attributo onmouseover.

<a id="linkConPopup" class="gray" href="#" >
© Copyright
</a> 

A questo punto tu penserai alle difficioltà di andare a gestire gli eventi onmouseover e onmouseout al di fuori di questa linea,
Ed io ti dò la soluzione.

Creiamo un nuovo documento di testo che chiameremo, che so, popup.js e ci inseriamo una bella funzioncina javascript:

var apriPopup=function(){
document.getElementById('chiudi-Copyright').style.display='block';document.getElementById('popup-Copyright').style.display='block';
return false;
}

Nell'header della pagina andremo ad inserire il nostro script con:

<script type="text/javascript" src="popup.js" /> 

Come assegnare al nostro caro link di cui sopra la funzione "apriPopup" per l'evento "onmouseover"?
Con la gestione degli eventi onload!

Sempre nel nostro file (popup.js) andremo a gestire l'evento window.onload come segue:

window.onload=function(){
    var linkDaGestire=document.getElementById("linkConPopup");
    linkDaGestire.onmousemove=apriPopup;

}

Nota come ho assegnato ad un evento (onmousemove) una funzione con il suo solo nome.
Se la funzione avesse richiesto dei parametri avrei potuto procedere con:

window.onload=function(){
    var linkDaGestire=document.getElementById("linkConPopup");
    linkDaGestire.onmousemove=function(){ apriPopup(parametro1, parametro2)};

}

Ripeti la cosa per l'evento onmouseout:

window.onload=function(){
    var linkDaGestire=document.getElementById("linkConPopup");
    linkDaGestire.onmousemove=function(){ apriPopup(parametro1, parametro2)};
    linkDaGestire.onmouseout=function(){ chiudiPopup(parametro1, parametro2)};
}

Se non ti è chiaro, allora ti dò la soluzione breve (e bruttina):

<a class="gray" href="#" onmouseover="document.getElementById('chiudi-\
Copyright').style.display='block';document.getElementById('popup-\
Copyright').style.display='block';" onmouseout="document.getElementById('chiudi-\
Copyright').style.display='none';document.getElementById('popup-\
Copyright').style.display='none';">
© Copyright
</a> 

Un'ultima cosa: evita di utilizzare link che portano ad #!

[Ht28]

Leggendo il tuo post mi sono ricordato che ho già una cosa del genere se tu entri nella mia Home e clicchi su @mail vedrai che nel form che si apre ci sono i 3 pulsantini di formattazione (B I U), li ho fatti in CSS perciò lo potrei fare anche con Copyright .
Che dici?

[H5N1_Aviaria]

Dico che:
1 - sì è la strada giusta.
2 - che hai messo a fare il link al validator se poi la pagina non è valida? (suggerimento: modifica quella & in "Privacy & reportage" con un &amp\;
3 - controlla bene i valori opacity nei CSS: anche il validatore CSS ha mal di pancia!

[Ht28]

Originariamente inviato da H5N1_Aviaria
Dico che:
1 - sì è la strada giusta.
2 - che hai messo a fare il link al validator se poi la pagina non è valida? (suggerimento: modifica quella & in "Privacy & reportage" con un &amp\;
3 - controlla bene i valori opacity nei CSS: anche il validatore CSS ha mal di pancia!

Punto 2 risolto, però pensavo: secondo te non andrebbe bene anche cosi con onclick? (clicca su Copyright)

[H5N1_Aviaria]

Direi che è meglio con onclick che con onmouseover...

[Ht28]

Originariamente inviato da H5N1_Aviaria
Direi che è meglio con onclick che con onmouseover...

Allora lo tengo cosi, per opacity da errore perchè non è supportato non saprei come settare.

Ho notato che se sposto in su un po la home (con la barra di scorrimento) e clicco si Copyright poi la home si riassesta, perchè non rimane dove viene messa?

[H5N1_Aviaria]

Nella funzione che richiami per visualizzare il contenuto del Copiright inserisci "return false".
Visto che è assegnata all'evento "onclick" tale evento ritornerà false e non avrai questo problema.
Altro metodo (sconsigliato) è quello di usare "#nogo"
Per quanto riguarda la proprietà opacity non è vero che non è supportata: in CSS3 è supportata, ma il problema è che usi la proprietà filter per IE!
Elimina quelle righe:
Per il 7 e 8 usa i commenti condizionali.
Per il 6 lascia stare, mica vorremo continuarlo a supportare a vita! Cavolo è vecchio di ben due versioni!

[Ht28]

Originariamente inviato da H5N1_Aviaria
Nella funzione che richiami per visualizzare il contenuto del Copiright inserisci "return false".
Visto che è assegnata all'evento "onclick" tale evento ritornerà false e non avrai questo problema.
Altro metodo (sconsigliato) è quello di usare "#nogo"
Per quanto riguarda la proprietà opacity non è vero che non è supportata: in CSS3 è supportata, ma il problema è che usi la proprietà filter per IE!
Elimina quelle righe:
Per il 7 e 8 usa i commenti condizionali.
Per il 6 lascia stare, mica vorremo continuarlo a supportare a vita! Cavolo è vecchio di ben due versioni!

Ho IE8 non so cosa intendi per commenti condizionali, dove li metto?

Ho anche messo return false, la home rimane su dove l'ho messa ma anche la finestrina si apre su, non torna giù nella home VVoVe:

[H5N1_Aviaria]

Commenti condizionali: fai una ricerca su html.it
Togli il return false e sostituisci i link # con #nogo.