Come assegnare " li a.active " ad una classe

[kipper]

ciao a tutti...
ho sostituito delle voci di menu "in formato testo" con 2 immagini (on.jpg e off.jpg); tutto ok tranne il fatto che quando clikko su un'immagine di menu che mi porta alla pagina, l'immagine della voce di menu ritorna allo stato off.jpg di partenza mentre io vorrei che rimanga on.jpg quando sono nella pagina interessata (per far capire all'utente in quale menu si trova, appunto...) es. se fosse la terza pagina/menu di 5:

off.jpg | off.jpg | ON.jpg | off.jpg | off.jpg

diciamo che ho quasi risolto nel senso che ho individuato (tramite Firebug...) gli attributi che fanno mantenere il colore nero alla voce di menu testuale una volta premuto e che sarebbe:

li a.active

...però se inserisco questo ultimo codice funziona benissimo (nel senso che l'immagine ON.jpg viene mantenuta alla pressione della voce di menu...) ma va a amodificare anche tutti gli altri elementi interessati (ovviamente mi riferisco alle voci/link NON di menu...)

ho provato ad assocciare questi attributi alla classe del menu ma non funziona! ...evidentemente mi perdo qualcosa...

ho fatto così:

.menu-221 li a.active {
  .......
}

qui il codice completo che funziona benissimo tranne questo ultimo passaggio:

.menu-221 a {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(off.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:0px;
  border:1px solid red;
}

.menu-221 a:hover {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(on.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:0px;
  border:1px solid red;
}

.menu-221 li a.active {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(on.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:0px;
  border:1px solid red;
}

.menu-303 a {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(off.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:20px;
  border:1px solid red;
}

.menu-303 a:hover {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(on.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:20px;
  border:1px solid red;
}

.menu-303 li a.active {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(on.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:20px;
  border:1px solid red;
}

come dovrei fare per associare/isolare/assegnare li a.active alla classe .menu-303 ?

grazie molte...

[kipper]

sono riuscito ad ottenere quello che volevo così:

li.menu-303 a.active {
  display:block;
  width:150px;
  height:50px;
  background: transparent url(on.jpg) no-repeat;
  text-indent: -10000px;
  float:left;
  margin-left:20px;
  border:1px solid red;
}

...ma c'è un fastidioso effetto indesiderato:
quando vado sopra il pulsante l'immagine cambia ma se esco dall'area pulsante prima del caricamento della pagina si vede per un attimo l'immagine precedente off.jpg ...una volta che la pagina è stata caricata il pulsante è OK on.jpg ...spero di essermi spiegato...

gli esperti che soluzione suggeriscono???

thanks!

[daniele95]

prova ad aggiungere a:active e dargli le stesse proprietà dell'hover...

[kipper]

grazie daniele95 ma non riesco a capire... mi faresti un esempio/aggiunta sulla base del mio codice?

abbi pazienza...

ciao

[kipper]

no... va bene così... mi sembra normale che se esco dall'immagine/link prima che si passi alla nuova pagina l'immagine cambia... credo...