CSS MiniAdv

Abbiamo ricevuto numerose email da designer che ci chiedono spiegazioni sul funzionamento del nostro nuovo spazio pubblicitario che abbiamo intitolato MiniAdv. E’ un JavaScript, è codice Php, è un’applicazione server-side? No, niente di tutto ciò. Il discorso è molto più semplice. E’ puro CSS. In questo articolo spiegheremo il funzionamento dei MiniAdv nel dettaglio, in modo da permettervi di utilizzarli in maniera semplice ed efficace all’interno delle vostre pagine.

L’idea di adottare questo tipo di spazi pubblicitari non è nata da noi. Credo che voi tutti ricordiate il grande successo ottenuto da quella che fu definita “The Million Dollar Homapage“. Una semplice pagina html ricoperta da centinaia di mini banner che hanno permesso al geniale ideatore di diventare milionario.

Molti siti internet utilizzano oggi lo stesso principio per guadagnare attraverso le proprie pagine. Tra i molti esempi possiamo sicuramente citare CSS Remix e Italian Web Gallery.

Nella maggior parte dei casi, passando il cursore del mouse sul mini banner, compare una tendina (tooltip) che offre alcune informazioni aggiuntive sul banner stesso come, ad esempio, il nome, la tagline o semplicemente un link al sito che ha pagato per mettere l’inserzione.

Questa interessante funzionalità viene spesso realizzata con l’utilizzo di codice JavaScript. Ma cosa succede se l’utente naviga le pagine del sito con i JavaScript disabilitati? La risposta è molto semplice. L’utente non vedrà la tendina con le informazioni aggiuntive. Questo significa che parte del contenuto non sarà accessibile.

Interessati ad utilizzare questo sistema su CSSGlance, abbiamo cercato di capire come fosse possibile realizzare lo stesso piacevole effetto di hover, garantendo comunque l’accessibilità dei contenuti della pagina. La soluzione è molto semplice: occorre utilizzare i CSS. E’, infatti, possibile creare tooltip, sul modello di quelli realizzati con l’impiego del JavaScript, interamente con l’impiego delle tecniche CSS. Questo significa produrre una funzionalità semplice, utile e soprattutto accessibile, in quanto funziona perfettametne anche se l’utente naviga con i browser disattivati.

Ecco quello che vogliamo ottenere e, adesso, vediamo come è possibile raggiungere questo risultato, analizzando il codice utilizzato nei dettagli.

Cio’ che ci serve è una semplice lista di link. Ecco come si presenta il codice XHTML di base:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

A questo punto non ci resta che far flottare gli elementi <li> al fine di posizionarli l’uno accanto all’altro. Occorre poi impostare un posizionamento relativo per i link, in modo da permettere agli span contenuti in essi di posizionarsi in maniera assoluta rispetto al link padre. Gli span devono avere impostata anche la proprietà display:none, che viene variata in display:block ogni qual volta il puntatore del mouse passa sopra il mini banner. Potrete facilmente risolvere i bug di ie utilizzando la proprietà z-index per il tootip e per gli altri contenitori del vostro layout.

Quello che segue è il codice CSS di base:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Ecco il risultato finale! Potete scaricare l’esempio (zip-9KB) e utilizzarlo liberamente nei vostri siti internet. Vi preghiamo di inserire un riferimento e un link a CSSGlance nella pagina in cui userete questa tecnica.

Leave a Comment

Comments are closed.



News and Articles

@media 2009 London

One day to go! What is considered one of the most intriguing and awe-inspiring web events around, will take place in London on Tue 25th and Fri 26th.

12 examples of mind-blowing websites

Web designers struggle every day to create impressive and usable websites, but what makes the difference between a good and functional product and a mind-blowing one?

News and articles archives

Recommended Books

Bulletproof Web Design

Bulletproof Web DesignStandards-based strategies for building designs that provide flexibility, readability, and user control--key components.

Web Standards Creativity

Web Standards Creativity10 web design lessons from 10 of the worlds best web designers: cutting-edge XHTML, CSS, and DOM scripting techniques.

Recommended books archives