Effetti di attivazione per i link costituiti da immagini

Questo articolo è una versione semplificata dell’articolo Gestione crossbrowser delle immagini linkate, e spiega come ottenere il seguente effetto:

Cioè un’immagine racchiusa in un link, che al passaggio del mouse o alla selezione tramite tastiera si evidenzi, magari, come in questo caso, cambiando il colore del bordo.

Se il codice HTML di partenza è il seguente:

<a href="#" class="prova"><img src="immagine.png"></a>

Il codice CSS sar� :

a.prova img { border: 5px solid #000; }
a.prova:hover { font-size: 101%; }
a.prova:hover img { border-color: #800; }

La parte importante è a.prova:hover { font-size: 101%; }, senza di questa dichiarazione apparentemente inutile, l’attivazione non funzionerebbe con Internet Explorer.

Infatti, perchÃ?© funzioni anche con Internet Explorer, è necessario definire un a:hover che faccia cambiare lo stato del link, in questo caso da un font-size pari al 100% di quello del suo elemento genitore (la sua misura naturale, se non diversamente specificato) ad uno pari al 101%.

a.prova:hover potrebbe essere omesso se nel foglio di stile fosse definito un a:hover prima della definizione:

a.prova img { border: 5px solid #000; }
a.prova:hover img { border-color: #800; }

Quello che abbiamo detto sinora vale per la selezione con il mouse, per la selezione con tastiera si legga Selezionare i link di un documento navigato con la tastiera.

post<li>

tag: anchor, CSS, immagini, internet explorer.

post correlati:

• Selezionare i link di un documento navigato con la tastiera
• Forzare l'aggiornamento della cache per file esterni
• Il box model
• Il doctype switch
• L'allineamento orizzontale degli elementi XHTML con i CSS
• Firefox 2, IE7 ed i moduli di ricerca
• Filtri CSS per Opera browser