Listbox/javascript et css

Bonjour a tous,

Je suis en train de programmer une petite listbox qui doit m'afficher un fond différent en fonction des choix sans recharger la page

voici mon code :

css :
#contact1 {
background: url(img/layerintro.jpg) left top no-repeat;
}
#contact2 {
background: url(img/layer1.jpg) left top no-repeat;
}#contact3 {
background: url(img/layer2.jpg) left top no-repeat;
}#contact4 {
background: url(img/layer3.jpg) left top no-repeat;
}#contact5 {
background: url(img/layer4.jpg) left top no-repeat;
}

Javascript :
function layerContact (idContact) {
for (var i = 1; i<=5; i++) {
   document.getElementById('contact'+i).id=idContact;
   return false; 
 }
}

Et enfin xhtml :
<div id="contact1">
<button type="submit" class="listcontact" onClick="javascript:verifDoubleClic('bt4');"></button>
  <br class="clearer" />
<ul id="bt4" class="bt">
        <li>
          <a onclick="javascript:closeList('bt4');javascript:layerContact('contact2');" href="#a" title="" >Renseignements commerciaux</a></li>
           <li>
          <a onclick="javascript:closeList('bt4');javascript:layerContact('contact3');" href="#b" title="">Demande d'identifiant et/ou de code confidentiel</a></li>
          <li>
          <a onclick="javascript:closeList('bt4');javascript:layerContact('contact4');" href="#c" title="">Assistance technique</a></li>
          <li>
          <a onclick="javascript:closeList('bt4');javascript:layerContact('contact5');" href="#d" title="">Réclamations ou suggestions</a></li>     
</ul>
</div>

Tout cela me parait relativement simple, seulement voila, cela ne marche qu'une fois ensuite j'ai une erreur js :

Erreur : document.getElementById("contact" + i) has no properties
Fichier source : layercontact.js
Ligne : 5

Je pense que je ne suis pas loin de la solution mais pour l'instant je rame et si une bonne âme voulait m'aider ...

Bonjour,
    javascript dans un évênement est un pléonasme
    mais 2 fois, ça lui plait encore moins.

    on ne dispose pas de la function closeList !

          <a onclick="closeList('bt4');
               layerContact('contact2');" href="#a" title="" >Renseignements commerciaux</a></li>

   perso à <a onclick="f1();" href="#"... >je préfère
                <a href="javascript:void(f1);"... >

---

                Cordialement            Bul         [mon Site]     [M'écrire]

j'ai oublie.. href="#"   sans rien derrière

---

                Cordialement            Bul         [mon Site]     [M'écrire]

de plus : document.getElementById('contact'+i).id=idContact;
    c'est censé faire quoi ?    pourquoi vouloir changer l'ID d'un élément ?

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Merci pour cette précision syntaxique bultez.

Pourquoi plusieurs événements javascript sur un même lien te semble déconseillé ? Je devrais tout intégrer dans la même fonction ?

Et merci pour la diligence de tes réponses ;o)

Oui le but était de changer d'id afin d'attribuer un css différent
Mais je passe maintenant par des class en identifiant sur un id et cela fonctionne impec ;o)