Effetti immagine del mouse-over possono essere utilizzati per rendere l'aspetto di un sito web e attirare l'attenzione di un utente per una particolare immagine. codice CSS, in collaborazione con HTML, può essere utilizzato per evidenziare l'immagine tramite la proprietà "opacità". Quando questa proprietà viene applicato al tag "img", l'immagine apparirà leggermente in grigio fino a quando l'utente posiziona il cursore del mouse sopra l'immagine, dando un effetto di "evidenziare". L'aggiunta di questa funzionalità per le immagini esistenti sulla tua pagina web è un processo relativamente semplice che richiede solo pochi minuti per fare.

istruzione

1 Aprire la pagina HTML che contiene l'immagine che si desidera evidenziare in un editor HTML.

2 Individuare il codice HTML che contiene l'immagine che si desidera evidenziare. Il codice può essere visualizzato come <img border = "0" all'interno del <tag a>. Il risultato finale dovrebbe apparire come il seguente: <a href="http://www.example.com/" class="highlightit"> <img border = "0" src = "test.gif"> </a>

3 Immettere il seguente codice CSS nell'intestazione CSS all'interno della pagina HTML o aprire il file CSS all'interno dell'editor HTML e aggiungere il codice. Salvare i file una volta terminato.

.highlightit img {

Filtro: progid: DXImageTransform.Microsoft.Alpha (opacità = 50);

-moz-opacità: 0,5;

Opacità: 0,5;

}

.highlightit: hover {IMG

Filtro: progid: DXImageTransform.Microsoft.Alpha (opacità = 100);

-moz-opacità: 1;

opacità: 1;

}