Un passaggio del mouse trasparente è un elemento HTML invisibile che occupa un blocco di spazio su una pagina Web. Quando il cursore del mouse dell'utente passa sopra lo spazio, una funzione di Javascript è chiamato a svolgere tutte le azioni che ti piace. mouseovers trasparenti sono versatili; è possibile inserire più di altri elementi come paragrafi di testo, o metterli in posizioni arbitrarie nella pagina per ottenere effetti interessanti.

istruzione

1 Inserire il seguente CSS e il codice JavaScript tra i tag "testa" del documento HTML:

<Style type = "text / css">

.contenitore{

position: relative;

display: inline-block;

}

.mousearea {

position: absolute;

width: 100%;

height: 100%;

z-index: 1;

}

</ Style>

<Script type = "text / javascript">

Funzione mouseOver () {

alert("mouseover detected");

}

</ Script>

2 Aggiungere il seguente codice al corpo del documento HTML:

<P class = "contenitore"> <span class = "mousearea" onMouseOver = "mouseOver ();">. </ Span> Questo testo ha una superficie trasparente passaggio del mouse sopra di esso </ p>

3 Salvare la pagina e caricarlo in Firefox. Scivolare il mouse sul testo, e viene visualizzata una finestra pop-up.

4 Arbitrariamente la posizione e la dimensione dell'area passaggio del mouse sulla pagina portandolo al di fuori dei tag "p" per cui il suo elemento principale è "corpo", cambiando le "width" e le proprietà "height", e l'impostazione della "sinistra" e "top" proprietà. Ad esempio, modificare la dichiarazione ".mousearea" nel codice CSS per i seguenti:

.mousearea {

position: absolute;

width: 200px;

height: 200px;

sinistra: 500px;

top: 100px;

z-index: 1;

}

Salvare la pagina e ricaricarla in Firefox. Muovi il mouse per la zona 500 pixel a destra del bordo sinistro della finestra e 100 pixel dall'alto. Verrà visualizzata la finestra di avviso.