Effetto pinball con i CSS
Venerdì 13 Luglio 2007 - 11:48
di Alessandro Fulciniti
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.
Commenti
1
Partendo dalla tua pagina col primo esempio, si può ottenere questa versione che permette di eliminare lo span vuoto (html più pulito) e che risolve il problema dell’area cliccabile su Opera e IE7.
Ecco il CSS:
body{font:12px Arial,sans-serif;background:#FFF;color:#222;}
div.blocklink{position:relative;width:300px;padding:55px 20px 20px 20px ;border:1px solid #ccc}
div.blocklink h2{margin:0; padding:0; font-size:18px}
div.blocklink h2 a { position: absolute;width:95%;height:88%; left:0; top:0; padding:10% 0 0 5%}
div.blocklink h2 a:hover { background: url(fake.gif)}
div.blocklink p{margin-top:5px}
div.blocklink img{float:left;margin:3px 10px 10px 0}
div.blocklink a{color: #6374AB;display:block}
div.blocklink:hover{background:#eee}Il problema dell’area cliccabile su opera e IE7 è risolto impostando un background farlocco sull’”a:hover” di “div.blocklink h2″.
Una controindicazione è che, avendo ora l’elemento h2 un posizionamento assoluto, bisogna calcolare i margini degli elementi che seguono per spaziarli correttamente…
# - postato da idrolitina - 13 Luglio 2007 - 15:08
2
Sarò retrogrado, ma a me l’intera area cliccabile continua a non piacere. Ci vedo più problemi che benefici (evidenziare una parte di testo, per esempio), oltre al fatto che ritrovarsi un cursore “a manina” su un’area così vasta può creare disorientamento nel visitatore.
Mi chiedo se hai mai fatto la prova su di un sito vero o se stiamo affrontando un discorso puramente accademico.
# - postato da Pierluigi - 13 Luglio 2007 - 18:03
3
Concordo con Pierluigi.
Sinceramente allo stato attuale credo che l’intera area cliccabile ricordi troppoi banner pubblicitari nascosti di cui purtroppo si fa ancora largamente uso nella rete, per cui in effetti si potrebbe veramente generare disorientamento e sospetto nel visitatore…# - postato da MidnightManiac - 16 Luglio 2007 - 07:41
4
Questo metodo (non la soluzione tecnica peraltro interessante) fa a pugni con accessibilità, usabilità e guidelines varie.
I commenti al post precedente erano alquanto unanimi…