cambio classe al click e ripristino delle altre

[-AA-]

Ho 2 semplici DIV che hanno immagini di sfondo differenti, ali click vorrei cambiare la singola classe del div clikkato e ripristinare le altre, sono arrivato a modificare la singola classe, mi manca il ripristino dell'altra:

<style type="text/css">
.my1{background-image:url(images/p_accesso_on.gif); width:470px; height:27px;}
.my1_off{background-image:url(images/p_accesso_off.gif); width:470px; height:27px;}

.my2{background-image:url(images/p_registrazione_on.gif); width:470px; height:27px;}
.my2_off{background-image:url(images/p_registrazione_off.gif); width:470px; height:27px;}
</style>



<div class="title my1" onclick="this.className='my1_off'">[img]images/pixel.gif[/img]</div>


<div class="title my2" onclick="this.className='my2_off'">[img]images/pixel.gif[/img]</div>

Ho bisogno al click di cambiare la classe del div clikkato e ripristinare le altre ...mi manca il ripristino....

ps: i div sono solo 2 non di +

[artorius]

non puoi usare una sola classe? Tipo:

<style type="text/css">
#Title1.my{background-image:url(images/p_accesso_on.gif); width:470px; height:27px;}
#Title1.my_off{background-image:url(images/p_accesso_off.gif); }

#Title2.my{background-image:url(images/p_registrazione_on.gif); width:470px; height:27px;}
#Title2.my_off{background-image:url(images/p_registrazione_off.gif); }
</style>

<div id = "Title1" class="title my"> ... </div>
<div id = "Title2" class="title my"> ... </div>

Te lo consiglio per due motivi:
1. È sempre buona prassi usare gli ID per identificare UN elemento, e non le classi
2. È molto più comodo per il JS manipolare le classi

Infatti, usando questi script: http://snippets.dzone.com/posts/show/2630

Puoi aggiungere e togliere le classi agli elementi senza cancellare il tutto.

Per il ripristino, ti basta usare una variabile che contenga tutti gli elementi che contengono la class "title". Usando questa funzione ( http://robertnyman.com/2005/11/07/th...tsbyclassname/ ) puoi ottenere elementi per la class. Mettendo tutto assieme:

var AllTitles = null;

window.onload = function(){
   AllTitles = getElementsByClassName(document, "div", "title"); //Tutti i div con class "title"
   for(var i = 0; i < AllTitles.length; i++){
      var elem = AllTitles[i];
      elem.onclick = ClickFunct;
   }
}

function ClickFunct(){
   for(var i = 0; i < AllTitles.length; i++){
      var elem = AllTitles[i]; 
      RemoveClassName(elem, "my_off");
   }
   AddClassName(this, "my_off");
}

In questo modo, quando clicchi su di un elemento, rimuove la classe "my_off" da tutti i div con class "title", per poi rimetterla solo al div sul quale ho cliccato.

[-AA-]

Grazie artorius
Vedo di adattare il tutto ai tuoi consigli