Images et ID

Version imprimable

Images et ID

Bonjour tout le monde,
Alors voilà je souhaite que lorsque qu'on clic sur une image, celle ci soit changer par imagebis. Si on reclic sur imagebis, que ça redevienne image, le tout pour toutes les images qui ont un id défini.

Je fais donc une boucle pour parcourir toutes les images de la page, si elles ont le meme genre d'id correspondant à l'image cliqué, alors je change l'img. Voici ce que je fais, mais je n'arrive pas a faire alert(tabImg[x].id) normal ??
Code:

1 2 3 4 5 6 7 8 9 10 var tabImg = window.document.getElementsByTagName('img'); alert(tabImg.length); for(j=0; j<tabImg.length;j++) { alert(tabImg[j].id); if( tabImg[j].id == temp) { tabImg[j].src = "media/kitplus.gif"; } }
Merci d'avance pour votre aide

20/08/2009, 10h16
E.Bzz

Bonjour,

Citation:

Envoyé par MasterChief78

Voici ce que je fais, mais je n'arrive pas a faire alert(tabImg[x].id) normal ??

à priori, non : pas normal.

Es-tu sûr qu'aucun id n'est dupliqué dans ta page ?
Cette phrase

Citation:

si elles ont le meme genre d'id correspondant à l'image cliqué

me fait en douter ...

A+
20/08/2009, 10h18
Bovino

Tu es sûr que toutes les images de ta page ont un id ?
20/08/2009, 10h21
lifty

C'est surtout la phrase "Le même genre d'ID", tu es toujours avec tes ids incrementaux ? :aie:

Citation:

le tout pour toutes les images qui ont un id défini.

Précise :D
20/08/2009, 10h22
MasterChief78

Oui et oui ^^
Voici comment est généré mon id d'image :

Code:

><img src="media/kitmoins.gif" id="cat<?php echo $i?>" onclick="fct()" />

Et de ce que je vois sur la page générée aucun souci, j'ai bien id="cat0", id="cat1" et puis aussi des id="cat00", id=cat"01", etc mais tous sont uniques et toutes les images en possèdent un. Chaque image est dans une case de tableau.

En fait c'est lié au problème que j'avais hier d'afficher cacher, bah en plus de ça je veux que l'image change ^^
20/08/2009, 10h27
MasterChief78

Citation:

Envoyé par lifty

C'est surtout la phrase "Le même genre d'ID", tu es toujours avec tes ids incrementaux ? :aie:

Précise :D

Oui toujours, mais en fait je me suis mal exprimé. Je boucle et je génère un string (temp) qui correspond peut être à un id d'image (ça peut être rien du tout aussi mais ça ça change rien). Si il correspond, je dois changer sa source.
Donc du coup, je boucle sur toutes les images du doc, je compare entre l'id de l'image en question et temp, si c'est égal, je remplace.
20/08/2009, 10h27
E.Bzz

Citation:

Envoyé par MasterChief78

en plus de ça je veux que l'image change ^^

Ben le

Code:

tabImg[j].src = "media/kitplus.gif";

est correct ...

Il y a quoi dans "temp" ?

A+

Voilà le code de la boucle générale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function affCache(num) {
 
//* pour recuperer tous les elements dont l'id est 0 ou 0*
//A voir si cela ne devrait pas être 0.+	
var expReg ="^"+num+"*";
table = document.getElementsByReg('tr','id',expReg);
var temp ="";
var temp2 = "";
 
if((table[0].style.display == '') || !(table[0].style.display)){
	for(i = 0; i < table.length; i++)
	 {
 
 
			table[i].style.display = 'none';
			temp2 = table[i].id;
			temp2 = temp2 + "";
			temp2 = temp2.substr(0, table[i].id.length-1);
			temp = "cat" + temp2;
			var tabImg = window.document.getElementsByTagName('img');
			alert(tabImg.length);
			for(j=0; j<tabImg.length;j++)
			{
				alert(tabImg[j].id);
				if(	tabImg[j].id == temp)
				{
					tabImg[j].src = "media/kitplus.gif";
	 			}	
	} 
}
 
else { 
 
}
 
}

Si je fais alert(temp) j'ai les résultats attendu : des chaines qui correspondent à un id d'img dans la page, et d'autres qui ne veulent rien dire.
alert(tabImg.length); m'affiche bien le bon nombre !

Si je reprends ce que l'on a vu hier, tu n'as pas besoin de changer toutes tes images :D, car si mes souvenirs a courts terme sont bons tu masques tout ce qu'il y a en dessous du bouton.

Il te suffit donc de ne changer que le bouton sur lequel tu cliques, les autres n'étant pas affichés.

Je prends l'exemple basique du + et du -, lorsque tu cliques sur clique sur le plus cela affiche les lignes masquées et sur le - cela les cache.
Comme tu n'as pas de nom pour tes images tu peut faire un truc comme ça
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function affCacheLeRetour(imgEl){ if(imgEl.name == "+"){ imgEl.src="unJoli+.png" } else if(imgEl.name == "-"){ imgEl.src="unJoli-.png" } else{ alert("Je sais pas coder en javascript :D"); } } <img name="-" src="media/kitmoins.gif" id="cat<?php echo $i?>" onclick="fct(); affCacheLeRetour(this)" />
Si je me trompe pas (ce qui peut arriver) et si j'ai bien compris ce que tu veut faire au final, tu n'as pas besoin de faire de boucle sur toutes les images :aie:

edit :
Citation:
Code:

1 2 3 4 5 function affCache(num) { //* pour recuperer tous les elements dont l'id est 0 ou 0* //A voir si cela ne devrait pas être 0.+ var expReg ="^"+num+"*";
Tu peut retirer ce commentaire il n'a plus lieu d'être ;) par contre tu peut le commenter pour toi si tu veut comprendre quelque chose quand tu reviendra sur ce code plus tard :mouarf:

20/08/2009, 10h39
MasterChief78

Citation:

Envoyé par lifty

Si je reprends ce que l'on a vu hier, tu n'as pas besoin de changer toutes tes images :D, car si mes souvenirs a courts terme sont bons tu masques tout ce qu'il y a en dessous du bouton.

Il te suffit donc de ne changer que le bouton sur lequel tu cliques, les autres n'étant pas affichés.

Je prends l'exemple basique du + et du -, lorsque tu cliques sur clique sur le plus cela affiche les lignes masquées et sur le - cela les cache.
Comme tu n'as pas de nom pour tes images tu peut faire un truc comme ça

Effectivement je vais tester cette solution, d'ailleur mon truc marche a peu pret maintenant c'est bon ^^
20/08/2009, 10h48
MasterChief78

Merci tout le monde pour vos réponses super rapides, ça marche :)