[javascript] changer les images d'un tableau

Bonjour,

je dispose d'un tableau composé d'images qui constituent les cases de mon tableau. Lorsque je clique sur l'une d'entre elle, l'image change d'aspect (effet de sélection d'une case du tableau) et un calque d'informations s'affiche.

http://img107.imageshack.us/img107/3013/screenlk0.gif

Le problème est que je me sert de l'évènement Onclick pour sélectionner la case et afficher les infos donc quand je clique sur une autre case, la précédente reste "sélectionnée".

onClick=\"this.src='img/icone_carte_on.gif'; showMenu();  \"   />

Je voudrais qu'il n'y ai qu'une image sélectionnée à la fois. Il faut que lorsque je clique sur une nouvelle case, la précédente "s'éteigne".

Comment faire ?
Merci !


PS : ne me proposez pas OnMouseOver : des liens devront être cliquables selon la case sélectionnée
Modifié par Api1000 (06 Dec 2006 - 20:21)

Mettre toutes tes cellules avec une la même classe (si c'est possible) et avec getelementbyclass (chercher sur google), les desactiver au moment du click

Non pas les déactiver ou les cacher... Mais changer leur url. Car il y a des images "au repos" (non sélectionnées) et "en action" (sélectionnées).
Comment faire...

Pardon je me suis trompé de mot, quand je disais "desactivé" c'est "desactiver le style", j'imagine que c'est bien avec une feuille de style que tu les "allumes" et que tu les "eteinds", j'imagine aussi que ça fait la même chose que le hover de ton lien?
Si ça t'interresse j'avais fait comme ça:

function ChangeClass(clas) {

   var tags = document.getElementsByTagName('*');
   for (var i = 0; ii < tags.length; ii++) {
 
      //on trouver classe demandé avec "on" et on la change
      if (tags ii .className == clas+'on'){
      tags ii .className = clas;
      }
   }
}

ou "clas" et la classe de ta cellule et clas+"on" et la classe "active"
Modifié par matmat (06 Dec 2006 - 20:41)

Non allumage extinction en images. Un image de nom img_on.gif et une autre img_off.gif
C'est pour ça que je te dis qu'il faut changer le src de l'image

ok et si tu fais comme ça:

function ChangeImg(clas) {
var tags = document.getElementsByTagName('img');
  for (var i = 0; ii < tags.length; ii++) {

      //on trouver les images avec "on" et on les change
      if (tags ii .src == clas+'on'){
      tags ii .src = clas;

      }

   }

}

bien sur dans ce cas tu as une image image.gif et imageon.gif
Modifié par matmat (06 Dec 2006 - 20:44)

Non ça ne marche pas voici un code plus complet :

<table border="0" cellpadding="0" cellspacing="2" id="carte">
<?php

for ($i=0; $i <= 10; $i++) { // Grâce aux boucles "pour" on génère un tableau de 10 lignes et 15 colonnes.
	echo "<tr>";
	for ($j=0; $j <= 15 ; $j++)  {
		echo "<td><img src=\"img/icone_carte_off.gif\" width=\"25\" height=\"25\"; id=\"javascript:coords($i,$j); \"   onClick=\"this.src='img/icone_carte_on.gif'; showMenu();  \"   /></td>";
	}
	echo "</tr>";
}
?>

</table>

Voilà ce que j'ai actuellement. J'ai testé ta méthode ça ne semble pas fonctionner matmat

au lieu de faire comme ça

onClick=\"this.src='img/icone_carte_on.gif'; showMenu();

tu fais ça:

onClick=function(){
 //on trouver les images avec "on" et on les change

      if (img.src == 'img/icone_carte_on.gif'){

      img.src == 'img/icone_carte_off.gif'



      }


};

Plus rien ne fonctionne... Même en changeant le showMenu() de place.

<?php

for ($i=0; $i <= 10; $i++) {
	echo "<tr>";
	for ($j=0; $j <= 15 ; $j++)  {
		echo "<td><img src=\"img/icone_carte_off.gif\" width=\"25\" height=\"25\"; name=\"onn\" id=\"javascript:coords($i,$j); \"   onClick=function () { showMenu(); if (img.src == 'img/icone_carte_on.gif'){ img.src == 'img/icone_carte_off.gif'} }; this.src='img/icone_carte_on.gif'; \"  \"   /></td>";
	}
	echo "</tr>";
}
?>

Modifié par Api1000 (06 Dec 2006 - 21:50)

En fait comme ça je crois que tu vas difficilement y arriver, il faut que ton php ne génére que tu code html et que ton javascript soit exterieur à l'histoire (voir les post précédent) parceque php/html/js moi je peu plus. Déja je préfere quand html et php sont séparés avec des templates.

au lieu de

echo "<td><img src=\"img/icone_carte_off.gif\" width=\"25\" height=\"25\"; name=\"onn\" id=\"javascript:coords($i,$j); \"   onClick=function () { showMenu(); if (img.src == 'img/icone_carte_on.gif'){ img.src == 'img/icone_carte_off.gif'} }; this.src='img/icone_carte_on.gif'; \"  \"   /></td>

tu as:

echo "<td><img src=\"img/icone_carte_off.gif\" width=\"25\" height=\"25\"; name=\"onn\" id=\"javascript:coords($i,$j); \" class="unnomrepereparlejs"/></td>

et aprés dans le js:

// Recupére tout les td
var Td = document.getElementsByTagName('td'), ii = 0, iCount = Td.length;
for (ii; ii<iCount; ii++) {

// Si il a la classe unnomrepereparlejs
if (Td[ii].className == "unnomrepereparlejs") {

      Td[ii].onclick = function() {
ta fonction():
  }
}

et là tu peux travailler proprement
Modifié par matmat (06 Dec 2006 - 22:30)

Ok je regarderai ça demain. Merci pour tout (je débute en JS tu as du t'en rendre compte lol ).