menu in javascript con css...

**klauzz** · 22-12-2003, 10:34

Ciao a tutti,
sto provando uno script java con l'utilizzo dei css...
avrei bisogno di modificarlo in questo modo:
quando faccio "onclick" su HOME, voglio che rimanga VERDE fino a quando non vado "onclick" su un altro bottone.
Il rollover rosso va bene, ma non deve disattivare il verde dell'on click!
Provate questo code e se riuscite a modificarlo...

un saluto a tutti e...
BUONE FESTE!!!

by KLAuzz

codice:

<html>
<head>
	<title>Untitled</title>
  
<script language='javascript'>
function pressed(valore){
     for( i=0;i < document.all.prova.length;i++){
         if( i==valore ){  
             document.all.prova(i).className = 'class2' ;
          }else{ 
             document.all.prova(i).className='class1';
         }  
     }
}

function over(valore){
     for( i=0;i < document.all.prova.length;i++){
         if( i==valore ){  
             document.all.prova(i).className = 'class3' ;
          }else{ 
             document.all.prova(i).className='class1';
         }  
     }
}

function out(valore){
     for( i=0;i < document.all.prova.length;i++){
         if( i==valore ){  
             document.all.prova(i).className = 'class1' ;
          }else{ 
             document.all.prova(i).className='class1';
             
         } 
       
     }
}


</script>


<style>
.class1 { background-color: white; color: black; } 
.class2 { background-color: green; color: white; } 
.class3 { background-color: red;   color: white; }

</style>

</head>

<body>
<table>
<tr>
    <td  id=prova onmouseover='over(0)' onmouseout='out(0)' onclick='pressed(0)'>home|</td>
    <td  id=prova onmouseover='over(1)' onmouseout='out(1)' onclick='pressed(1)' >Chi siamo|</td>
    <td  id=prova onmouseover='over(2)' onmouseout='out(2)' onclick='pressed(2)' >Contatti</td>
</tr>
</table>


</body>
</html>

**ilgiovo** · 22-12-2003, 10:52

tramite css solamente non credo che si possa fare... secondo me ti ci vorrebbe una funzioncina javascript che lanci sull'onclick dei link, la quale prima setta tutti i colori dei link a il colore disattivo, e poi rimette il colore del link attivo al colore attivo. Non so se mi sono spiegato...

**klauzz** · 22-12-2003, 11:30

si... per capire ho capito, ma non saprei certo costruirlo questo javasript... non conosco javascript... è per questo che cercavo un aiuto... eheh

**ilgiovo** · 22-12-2003, 11:46

una domanda: perchè non usi i link invece di gestire l'onclick dei td??

ti consiglio comunque di farti un bel corsetto/tutorial/smanettamento con javascript & html!!!

allora io farei così:

nei td aggiungi l'attributo name:

name="tdMenu"

in tutte le celle del menu che vuoi che cambino colore.

poi nella funzione pressed usa questo codice (al posto del tuo):

collObj = document.getElementsByName("tdMenu")
for (i = 0; i < collObj.length; i++) {
collObj[i].className = nome_della_classe_disattiva;
}
collObj[valore].className = nome_della_classe_attiva;

non l'ho testato ma dovrebbe andare!

**klauzz** · 22-12-2003, 12:55

bè, prendo in considerazione il tuo consiglio,
ma purtroppo lo script non mi funzia... mi dà un errore nella linea

codice:

collObj[i].className = nome_della_classe_disattiva;

ti consiglierei di testare il corretto funzionamento, dato che il Javascript ha un carattere mooolto difficile, come tu sai, e un apice al posto sbagliato potrebbe mandare tutto a remengo ehehe

un saluto da
KLAuzz

**ilgiovo** · 22-12-2003, 13:26

Originariamente inviato da klauzz
bè, prendo in considerazione il tuo consiglio,
ma purtroppo lo script non mi funzia... mi dà un errore nella linea

codice:

collObj[i].className = nome_della_classe_disattiva;

ti consiglierei di testare il corretto funzionamento, dato che il Javascript ha un carattere mooolto difficile, come tu sai, e un apice al posto sbagliato potrebbe mandare tutto a remengo ehehe

un saluto da
KLAuzz

hai sostituito nome_della_class_disattiva con il tuo nome della class disattiva tra apici VERO??? :quipy:

**klauzz** · 22-12-2003, 13:49

yesss

fin lì ci arrivavo... ehehe

grazie in ogni caso per l'interessamento, nee

bè... se hai l'occasione di testarlo fammi un fiskio

io sono qui

thanxxx :metallica

**ilgiovo** · 22-12-2003, 14:09

allora... questa dovrebbe andare

in realtà prima cannavo io perchè dimenticavo che il td di una table non può avere l'attributo 'name'.... quindi ho risolto così:

<html>
<head>
<title>Untitled</title>

<script language='javascript'>

var numero_di_voci = 3 // setta qui il numero di voci del tuo menu

function pressed(objTd){
for (i = 0; i < numero_di_voci; i++) {
document.getElementById("tdmenu" + i).className = 'class1';
}
objTd.className = 'class2';
}

function over(objTd){
objTd.className = 'class3';
}

function out(objTd){
if (objTd.className != 'class2')
objTd.className = 'class1';
}

</script>

<style>
.class1 { background-color: white; color: black; }
.class2 { background-color: green; color: white; }
.class3 { background-color: red; color: white; }

</style>

</head>

<body>
<table>
<tr>
<td id="tdmenu0" onmouseover='over(this)' onmouseout='out(this)' onclick='pressed(this)'>home|</td>
<td id="tdmenu1" onmouseover='over(this)' onmouseout='out(this)' onclick='pressed(this)' >Chi siamo|</td>
<td id="tdmenu2" onmouseover='over(this)' onmouseout='out(this)' onclick='pressed(this)' >Contatti</td>
</tr>
</table>

</body>
</html>

ciao!

**klauzz** · 22-12-2003, 15:35

weeeiii, grazzzie, nee

funzia alla grande!
sei stato proprio in gamba... mi spiace che non riesco molto a capire il funzionamento, ma prima o poi lo capirò

una sola cosa ti vorrei chiedere:
quando clicco su Home, il pulsante diventa verde, e ci rimane, ma quando vado sopra Home on mouse over si deseleziona il verde.
E' possibile far capire al sistema che quando il pulsante è verde mi disattivi l'on mouse over?

grazie ankora di tutto.

KLAuzz

**ilgiovo** · 22-12-2003, 16:08

Originariamente inviato da klauzz
weeeiii, grazzzie, nee

funzia alla grande!
sei stato proprio in gamba... mi spiace che non riesco molto a capire il funzionamento, ma prima o poi lo capirò

una sola cosa ti vorrei chiedere:
quando clicco su Home, il pulsante diventa verde, e ci rimane, ma quando vado sopra Home on mouse over si deseleziona il verde.
E' possibile far capire al sistema che quando il pulsante è verde mi disattivi l'on mouse over?

grazie ankora di tutto.

KLAuzz

certo che puoi: basta aggiungere un test alla funzione Over:

function over(objTd){
if (objTd.className != 'class2')
objTd.className = 'class3';
}

in breve, il funzionamento è piuttosto semplice:
- ogni cella (td) viene identificata tramite un nome univoco (id). Ad ogni cella vengono abbinati gli eventi e le relative funzioni che il browser farà scattare sull'evento. La chiamata alle funzioni avviene passando come parametro 'this', che significa l'oggetto stesso su cui viene chiamata la funzione. Quindi quando clicchi su tdmenu0 la funzione avrà come argomento l'oggetto tdmenu0.
Per questo, quando arriviamo nella funzione abbiamo già il riferimento all'oggetto dentro la variabile objTd e ci basta settare la proprietà className, che abbina ad un oggetto una classe di stylesheet. Il resto è semplice: nelle funzioni out e over testo se l'oggetto ha già come classe quella selezionata, nel qual caso non faccio nulla (è il problema che avevi, di quando passi sopra un td già selezionato e ti ritorna rosso). Nel caso invece del click, visto che non esiste l'evento opposto, non puoi sapere quando far tornare normale l'elemento verde, quindi faccio un ciclo su tutti gli elementi del menu (di cui conosco l'id costruendomelo con "tdmenu" + un contatore) per settarli a non-attivi

spero di aver chiarito un po'
ciao

Discussione: menu in javascript con css...

Strumenti discussione

Ricerca discussione

Visualizza

menu in javascript con css... mi date una mano?

Permessi di invio