Effetto pinball con i CSS

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.