Changement "permanent" d'une image et son fond quand on cli

Bonjour à tous,

J'ai un petit problème que je n'ai pas su résoudre malgré mes recherches sur la toile.

Alors je voudrais faire en sorte que quand je clique sur l'icône de mon onglet dont le lien charge un HTML dans une Iframe, l'image de mon onglet et son fond change de couleur tant que je ne clique pas sur un autre onglet auquel il se passerait la même chose.

C'est un peu compliqué donc j'espère qu'il y a une solution alternative que ce soit en CSS ou avec du Javascript.

Exemple de mon html:

<div id='contact'>
				
<a href="contactiframe.html" target="iframe">

<img src="images/3.png" onmouseover=this.src='images/3hover.png'; onmouseout=this.src='images/3.png'; onclick=this.src='images/3hover.png'" />
					
</a>
				
</div>

Le fond de l'onglet de base est disons gris, l'icône(lien) est blanc. Et quand on le survole, le fond devient blanc et l'icône(lien) change d'image et est noir.



Mon problème peut-il se régler par je ne sais quelle magie ?

Merci d'avance à ceux qui essayeront de m'aider.
Cordialement

Salut Jakijako,

Le plus simple serait d'utiliser Jquery avec quelque chose comme ça :

$("#contact a").click(
   function () {
      $("#contact").css({background: white });
      $("#contact img").attr("src","images/3.png");
   }
);

Je n'ai pas testé, c'est juste une piste. Tu peux aussi utiliser les fonctions addClass et removeClass.
Modifié par hchtot (12 Jan 2012 - 13:34)