Quante volte vi siete trovati a combattere tra la bellezza del vostro disegno e la complessità di impaginazione per via di font particolari non supportati di default dai più comuni sistemi operativi? Supponiamo che ho disegnato un menu con un font poco comune ed il mio desiderio è quello di riprodurre su web ciò che ho disegnato con Photoshop. Di soluzioni ce ne sono poche: o ritagliamo ogni singola voce di menu utilizzando il famosissimo effetto Rollover (css, javascript, ecc…) o cosa più utile ma meno conosciuta imparare la tecnica utilissima degli Sprite Menu.
La differenza tra un webdesigner ed un WEBDESIGNER sta proprio nella scelta della migliore “tecnologia” possibile per favorire maggiori vantaggi di navigazione da parte dell’utente finale.
Come funziona?
Supponiamo di voler creare un menu con 5 voci, per cui nella pagina HTML scriverò una semplice lista:
<ul class=”sprite-menu” >
<li id=”sprite-menu01″><a href=”#”><span>Voce 1</span></a></LI>
<li id=”sprite-menu02″><a href=”#”><span>Voce 2</span></a></LI>
<li id=”sprite-menu03″><a href=”#”><span>Voce 3</span></a></LI>
<li id=”sprite-menu04″><a href=”#”><span>Voce 4</span></a></LI>
<li id=”sprite-menu05″><a href=”#”><span>Voce 5</span></a></LI>
</ul>
Il lavoro più grosso verrà fatto tramite il CSS, in teoria basta settare un’immagine di sfondo (la stessa) ad ogni link e cambiare altezza e larghezza a seconda del nostro disegno, in pratica questo:
/*Definisco largezza ed altezza dello sprite menu*/
#sprite-menu{ background:url(‘sprite-menu.jpg’) no-repeat; width:153px; height:105px; padding:0; margin-left:220px; float:right; }
/*Non visualizzo i caratteri testuali all’interno di ogni lista*/
#sprite-menu span{ display: none; }
/*Definisco larghezza della lista*/
#sprite-menu li, #sprite-menu a { height:55px; display:block; margin-top:0px; }
#sprite-menu li { float:left; list-style:none; display:inline; }/*Definisco i link contrassegnandoli con un progressivo da 1 a 5 in questo caso*/
#sprite-menu01 { width: 50px; height:50px; }
#sprite-menu02 { width: 50px; height:50px; }
#sprite-menu03 { width: 51px; height:50px; }
#sprite-menu04 { width: 50px; height:50px; }
#sprite-menu05 { width: 50px; height:50px; }/*Per ogni classe imposto una diversa posizione dello sfondo unico, sull’asse interessato (in questo caso delle Y) */
#sprite-menu02 a:hover { background:url(‘sprite-menu.jpg’) 0 -106px no-repeat; }
#sprite-menu02 a:hover { background:url(‘sprite-menu.jpg’) -50px -106px no-repeat; }
#sprite-menu03 a:hover { background:url(‘sprite-menu.jpg’) -100px -106px no-repeat; }
#sprite-menu04 a:hover { background:url(‘sprite-menu.jpg’) 0 -161px no-repeat; }
#sprite-menu05 a:hover { background:url(‘sprite-menu.jpg’) -50px -161px no-repeat; }
Come vedete l’immagine è sempre la stessa (sprite-menu.jpg) caricata solo una volta, al passaggio del mouse su ogni singola voce si attiva lo stesso sfondo ma con una posizione di background differente (cioè quella che vogliamo passare come effetto di rollover). Per calcolare l’asse si può utilizzare un qualsiasi programma di grafica.
Vantaggi e svantaggi
VANTAGGI:
– Appena apro la pagina web il browser caricherà l’immagine in blocco anzichè 2 per ogni voce, ciò comporta una sola richiesta http anzichè 12 (se utilizzo 6 voci) o 50 (se ne utilizzo 25) e via dicendo;
– Velocizza drasticamente i tempi di caricamento di una pagina per il motivo sopra elencato;
– E’ Cross Browser;
– Compatibile con gli standard w3c e wai.
SVANTAGGI
– Ogni qual volta devo aggiungere/rimuovere una voce dal menu dovrò farlo graficamente (per questo è fondamentale salvare un psd con il solo sprite menu in modo tale che sarà più facile salvare ed esportare mantenendo le stesse dimensioni);
– Calcolare l’asse ad ogni rollover (consiglio l’utilizzo di una developer toolbar che tutti gli ultimi browser hanno).
