Nel post di ieri
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
,
in cui però il contesto di posizionamento è determinato dal contenitore
principale della sezione.. una specie di
senza la necessità di javascript.
Ecco quindi il
: 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'
: 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'
è 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
,
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
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'
su HTML.it.
