finestra a comparsa

[Mr_anderson]

ciao ... volevo fare in modo che quando si andava sopra ad unimmagine con il mouse senza ciccare ne niente mi venga fuori una riquadro interno con delle spiegazioni ... come faccio ???? cioè tipo io volevo mettere un punto di domanda e poi quando vai sopra compare questo riquadro ...

[giancarlo75]

Intanto se vuoi attivare un controllo senza cliccare ma solo passando sopra all'immagine -nel tuo caso il punto di domanda- devi utilizzare gli event handler onmouseover ed onmouseout nel codice html così:
<A onmouseover="vediBox();" onmuoseout="nascondiBox();">
[img]immagini/punto_di_domanda.gif[/img]
</A>
le due funzioni vediBox() e nascondiBox() possono anche fare quello che fa un'unica funzione comparsaBox(), in tal caso entrambi gli event handler attivano quest'ultima funzione.

Passando alle funzioni io avevo provato utilizzando l'Array styleSheets e cambiando negli stili la proprietà visibility.

Potresti leggerti l'articolo Cambiare al volo i fogli di stile di William Verdolin, comunque più o meno funziona così.

Nell'html inserisci un box
<div id="testo_nascosto">
Qui metti il testo nascosto che appare andando sul punto interrogativo
</div>

poi da qualche parte nella pagina inserisci lo stile del box
<STYLE TYPE="text/css">
#testo_nascosto{
visibility:hidden;
}

infine, sempre nella pagina inserisci lo script con le funzioni (o la funzione):
<SCRIPT LANGUAGE="JavaScript">
<!--

ok = (document.styleSheets) ? 1:0;
IE4 = (document.all) ? 1:0;
NN6 = (!document.all && document.getElementById) ? 1:0;

if(ok) {
if(IE4) stile = document.styleSheets[0].rules
if(NN6) stile = document.styleSheets[0].cssRules
}

function comparsaBox()
{
var visibilita = stile[0].visibility;
if (visibilita == hidden)
visibilita = visible;
else if (visibilita == visible)
visibilita = hidden;
}

</SCRIPT>

Dovrebbe funzionare, almeno sui browser che includono l'oggetto styleSheets.

Attento agli zeri dentro le parentesi [0].
Il primo [0] nel testo
if(ok) {
if(IE4) stile = document.styleSheets[0].rules
if(NN6) stile = document.styleSheets[0].cssRules
}
richiama il foglio di stile. Se hai più fogli di stile collegati devi rintracciare quello che contiene il settaggio della visibilità del box.
Il secondo [0] dentro la funzione richiama la rule ovvero la parte entro le parentesi
#testo_nascosto{
visibility:hidden;
}
del foglio di stile rintracciato in precedenza.
Potresti avere
html{
margin:0 auto;
padding:0;
text-align:center;
}
body{
margin:0 auto;
padding:0;
text-align:center;
background-color: #000000;
}
#testo_nascosto{
visibility:hidden;
}

In tal caso la rule che interessa ha indice [2].

Per altre informazioni leggi l'articolo.