Per prima cosa dobbiamo mettere a posto l'HTML, tralasciando il fatto che sarebbe meglio usare i div piuttosto che le table per fare la struttura del sito dovremmo modificare il codice relativo al tuo menu... Si tratta solo di aggiungere degli ID ad ogni singolo tag <a> all'interno della tabella
Ora dobbiamo creare degli sprite cioè un'immagine unica che mette le due immagini (testo con e senza illuminazione) in un'immagine sola in modo checodice:<table cellspacing="0" cellpadding="0" border="0" align="center" width="582" id="Tabella_01"> <tbody><tr> <td>< id="voce1" a href="http://www.aurorademasi.com/portraits.html"></a></td> <td></td> <td></td> <td></td> </tr> </tbody></table>"
e inserire nel CSS questa porzione di codice che quella spenta sia sopra e quella accesa sia sotto come in questa immagine.
(Le immagini devono essere alte 30px e la sprite di conseguenza 60px il doppio ovviamente).
Ecco un esempio
a questo punto passiamo al CSS:
devi fare un ID voceN per ogni voce del menu basta conoscere la larghezza e impostarla nel width mentre lo sprite delle due immagini create prima va messo in background-image.codice:#Tabella_01 a{background-repeat:no-repeat; background-position:0px 0px; height:30px; display:block;} #voce3{background-image:url(index.gif); width:93px}
In ultimo, ecco lo script da mettere sotto il tag della tabella del menu oppure in fondo alla pagina prima della chiusura del body.
Ricordati di mettere nella <head> il tag per incorporare Jquery:
codice:<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>Per modificare la cadenza dello script cambia l'ultimo numero il "2000" a tuo piacimento 2000 millisecondi = 2 secondi.codice:<script type="text/javascript"> $(function(){ setInterval(function dothis() { xxx = $("#Tabella_01 a").css("background-position"); if( xxx == "0px -30px"){ $("#Tabella_01 a").css("background-position","0px 0px"); } else { $("#Tabella_01 a").css("background-position","0px -30px"); } }, 2000); // modifica questo numero per cambiare la cadenza dello script. }); </script>
DEMO: clicca qui
P.S. è da provare con i browser ex Internet Explorer 6 - 8 CIAOO, SImo mantiene le promesse.


Rispondi quotando