<p align=center><table class="tabella" id="Menu"> <!--E' indispensabile, per lo stile, indicare l'attributo (class="tabella") corrispondente allo stile; L'identificatore della tabella (id="Menu") servirà per lo script che aggiungeremo.--> |
var x=document.getElementById('Menu').rows <!--document.getElementById restituisce l'elemento di cui è specificato l'ID tra parentesi -->Dichiareremo poi una variabile, ad esempio di nome riga1, che indichi la prima riga
var riga1=x[0].cellsEcco come ci si può riferire alle varie celle della tabella:
riga1[0] | riga1[1] | riga1[2] | riga1[3] | riga1[4] |
function cambia(n){ //Notate il parametro n /*Nella variabile di nome sfondo, sostituite ordinatamente, e senza andare a capo, al posto dei puntini, i nomi delle immagini che volete compaiano nelle celle al passaggio del mouse. Il primo elemento va lasciato vuoto. */ sfondo= new Array('','...','...','...','...','...') //Nella variabile di nome colori, sostituite ordinatamente, i vostri colori preferiti. colori= new Array('navy','#BF788B','#B380B7','#B380B7','#4D61E3','#BC6467') var x=document.getElementById('Menu').rows var riga1=x[0].cells //Ciclo enumerativo che scorre tutte le celle della prima e unica riga: da 0 a riga1.length for (i=0;i<riga1.length;i++){ // Se la cella che viene individuata è quella su cui passa il mouse si eseguono le operazioni previste if (i==n-1){ riga1[i].style.width = "28%"; // La cella occupa il 28% della tabella riga1[i].style.color = colori[n]; // Il colore della scritta è quello prescelto riga1[i].style.letterSpacing = "2" // Aumenta lo spazio fra le lettere riga1[i].style.background='url(' + sfondo[n] +') center right no-repeat' // Viene aggiunto lo sfondo riga1[i].style.borderRightWidth='1px' // Viene aggiunto un bordo a sinistra della cella } // altrimenti else { riga1[i].style.width = "18%"; // La cella occupa il 18% della tabella riga1[i].style.background=sfondo[0]; // nella cella non compare alcuno sfondo riga1[i].style.borderRightWidth='0px' // Sparisce il bordo a sinistra della cella riga1[i].style.color = colori[0]; // Il colore della scritta è di nuovo navy riga1[i].style.letterSpacing = "1" // Lo spazio fra le lettere torna normale } } } |
PRIMO ESEMPIO Pagina 1 2 3 4 5 SECONDO ESEMPIO Pagina 1 2 3 4 Indice
©2010 www.webfract.it