In questo breve appuntamento vedremo una semplice tecnica per aggiungere una piccola
lente sui link che contengono immagini, tipicamente le miniature che puntano agli ingrandimenti.
La tecnica può essere facilmente integrata in pagine che usano ad esempio Lightbox,
ingrandimenti nella stessa pagina o popup. Cominciamo subito presentando l'esempio
e il suo screenshot:
La tecnica richiede una piccola immagine PNG che rappresenta la lente (meglio se con trasparenza variabile),
un'aggiunta nel markup e poche regole CSS. Per quanto riguarda l'immagine, ho usato una PNG
di 32x32 pixel trovata liberamente in rete.
Cominciamo dal markup: per ottenere l'effetto lente sarà necessario
inserire all'interno del link che contiene l'immagine un elemento span vuoto, oltre ad avere una
classe in grado di indicare i link che contengono le immagini. Da notare che lo span,
pur non avendo alcuna valenza semantica, non influisce sulla presentazione naturale di pagina né intacca i contenuti o l'accessibilità.
Ecco il codice:
<a class="pic" href="#">
<img src="immagine.jpg" alt="immagine">
<span></span>
</a>
Siamo pronti a procedere con il CSS dell'esempio, che sostanzialmente si
basa sui posizionamenti assoluti. Il link verrà posizionato relativamente, così da creare un contesto
di posizionamento e lo span sarà quindi posizionato assolutamente al suo interno.
Quest'ultimo sarà visibile solo in fase :hover del link, in un modo molto simile a quello
dei messaggi su richiesta con i CSS. Ecco il CSS per intero:
a.pic{float: left;position: relative;
margin: 0 10px 10px 0;padding: 4px;
border: 1px solid; border-color: #CCC #999 #999 #CCC;
}
a.pic img{display: block; border: 0 solid}
a.pic span{display: none}
a.pic:hover{background: #eee}
a.pic:hover span{ display:block;
position: absolute;top: 50%;left: 50%;
width: 32px;height: 32px;
margin:-16px 0 0 -16px;
background: url(zoom.png)}
Le prime due regole CSS dell'esempio definiscono stili dei link (da evidenziare
il position:relative che è indispensabile ai fini della tecnica) e immagini, mentre la terza
regola nasconde lo span in stato normale dei link.
Vale la pena soffermarsi sulla regola che definisce il colore di sfondo dei link
in fase :hover, che ha una duplice funzione: rafforzare visivamente il passaggio
del mouse sul link e fare da attivatore per IE5.x e IE6. Senza tale regola,
o comunque una dichiarazione che intervenga su colore del testo, di sfondo o i
bordi la tecnica non avrà efficacia sulle vecchie versioni del browser di casa Microsoft.
L'ultima regola infine definisce la presentazione dello span in fase :hover
dei link. Questo verrà posizionato con il suo angolo in alto a sinistra sull'esatto
centro dell'area di contenuto del link, per poi essere traslato verso l'alto e verso
sinistra di una misura pari alla metà delle sue dimensioni grazie ai margini negativi.
Il risultato è quindi che nell'esempio la nostra lente sarà perfettamente centrata rispetto all'immagine.
Conclusioni
Ho pensato di preparare una variante un po' più discreta,
in cui un'icona 16x16 viene posizionata nell'angolo in alto a destra: è bastato in
questo caso intervenire sulle coordinate del posizionamento e rimuovere
i margini negativi.
Entrambi gli esempi hanno una buona compatibilità: sono stati infatti
testati sulle versioni di IE dalla 5 alla 8, oltre che sulle ultime versioni
di Firefox, Safari e Opera. Sulle versioni di IE dalla 5 alla 6 le PNG non verranno
mostrate con la trasparenza di sfondo, dato che questi browser non supportano
l'opacità variabile. Si può intervenire attraverso una delle tante soluzioni
disponibili per abilitarla, oppure più semplicemente lasciare che l'immagine sia
totalmente coprente come ho fatto nei due esempi.
Codice, immagini ed esempi sono disponibili per il download. Alla prossima.
