Nel post di ieri "Io clicco sulle figure" ho anticipato in chiusura
una soluzione che consente di ottenere link a tutto campo che
non implica vincoli dal markup e dalla struttura.
L'idea è semplice: utilizzare uno span vuoto aggiuntivo
all'interno del link per realizzare una sorta di cover-up span,
in cui però il contesto di posizionamento è determinato dal contenitore
principale della sezione.. una specie di effetto pinball senza la necessità di javascript.
Ecco quindi il primo esempio: se lo consultate con Firefox e Safari noterete che il link, che punta all'home page del blog, si espande sull'intera sezione.
Due parole sull'implementazione dell'esempio: si tratta di rendere
position:relative il div contenitore della sezione e posizionare
in maniera assoluta lo span, impostandone altezza e larghezza al 100%. L'effetto
rollover sull'intera sezione viene poi emulato attraverso la pseudo-classe :hover
applicata al div esterno. Ecco la parte di CSS essenziale:
div.blocklink{
position: relative;
}
div.blocklink:hover{
/*qui le dichiarazioni per emulare il rollover*/
}
div.blockink a span{
position: absolute;
top: 0;left: 0;
width: 100%;height: 100%;
}
Una precisazione è doverosa. L'esempio è da considerarsi come una sperimentazione
o poco più: mentre è perfetto su Firefox 2 e Safari 3, su IE7 e Opera 9.2
in effetti l'area cliccabile è estesa in maniera anomala: oltre al titolo è
la zona link include solo le parti bianche, ovvero esclusi paragrafi
e immagine. Cià potrebbe introdurre seri problemi di usabilità , dato che il rollover
è emulato sull'intera sezione. Inoltre su IE6 il rollover non c'è, vista l'assenza
di supporto di :hover su elementi che non siano link, e la zona link
estesa dallo span è confinata al titolo o poco più, credo per problemi di posizionamenti assoluti.
Un'alternativa leggermente più sensibile potrebbe essere quella del secondo esempio,
in cui lo span è inserito in un secondo link, che circonda la miniatura. Cià estende
la zona link anche sulla miniatura su IE6, IE7 e Opera. Si ricade quindi in una sorta
di "caso B" di cui abbiamo parlato ieri
su questi tre browser, mentre un perfetto "Caso D" su Firefox e Safari.
Ma proprio per queste differenze di comportamento sui browser è da intendersi come
una sperimentazione... Peccato perché poteva trattarsi di una soluzione semplice
e potenzialmente utile in certi casi. In chiusura per gli approfondimenti teorici
rimando all'articolo sui posizionamenti assoluti
su HTML.it.
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
