Discussion :

[cli16]

Bonjour à tous,


Je vous sollicite par rapport à une problématique que j'ai... et souhaiterai savoir si ce que je veux faire est possible en javascript ou pas.

J'ai 2 images qui portent la même classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img class="mon_image" src="toto.jpg">
<img class="mon_image" src="titi.jpg">

Lors d'une action (du type onclick, onmouseover, onmouseout...) sur un autre composant de la page je souhaiterai pouvoir modifier le src des 2 images.

Bien entendu je n'ai pas la possibilité d'ajouter un ID à ces 2 images sinon ça serait trop facile

Je sais qu'il n'existe pas de fonction de base en Javascript qui permet de récupérer un objet via son "class", j'utilise néanmoins une fonction qui permet de le faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 getElementsBySelector(selector){
 
            		var i,selid="",selclass="",tag=selector,f,s=[],objlist=[];
            		if(selector.indexOf(" ")>0){  //selector like "tag#id tag"
            			s=selector.split(" ");
            			var fs=s[0].split("#");
            			if(fs.length==1) return(objlist);
            			f=document.getElementById(fs[1]);
            			if(f) return(f.getElementsByTagName(s[1]));
            			return(objlist);
            		}
            		if(selector.indexOf("#")>0){ //id selector like "tag#id"
            			s=selector.split("#");
            			tag=s[0];
            			selid=s[1];
            	    }
            		if(selid!=""){
            			f=document.getElementById(selid);
            			if(f) objlist.push(f);
            			return(objlist);
            	    }
            		if(selector.indexOf(".")>0){  //class selector like "tag.class"
            			s=selector.split(".");
            			tag=s[0];
            			selclass=s[1];
            	    }
            		var v=document.getElementsByTagName(tag);  // tag selector like "tag"
            		if(selclass=="")
            			return(v);
            		for(i=0;i<v.length;i++){
            			if(v[i].className.indexOf(selclass)>=0)
            				objlist.push(v[i]);
            	    }
            		return(objlist);
            	}

J'ai donc essayé de récupérer via cette fonction mes 2 images par leur nom de classe, puis je leur ai attribué la nouvelle valeur de src, mais ça ne fonctionne pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var v = getElementsBySelector('img.mon_image');
                  for(i=0;i<v.length;i++){
            			v[i].src="mon_nouveau_src.jpg";
                  }

Quelqu'un saurait-il si ce que je souhaite faire est possible ?
Je rappelle que je ne peux pas ajouter d'id dans les 2 balises images...

Merci pour votre aide.

[andry.aime]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var v = document.getElementsByClassName("mon_image");
for(i=0;i<v.length;i++){
            			v[i].src="mon_nouveau_src.jpg";
                  }

[cli16]

Merci andry.aime pour cette réponse, j'arrive à modifier le src (en fait ma méthode marchait, j'avais mal du rafraîchir...).

Maintenant une nouvelle problématique dans le même genre mais plus compliquée, j'ai fait plusieurs tests mais n'y arrive pas...

J'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div class="classe1">
  <div class="classe2">une phrase</div>
  <div>
    <img src="test.jpg">
  </div>
<div>une phrase 2</div>
</div>

Je dois ici aussi modifier le src de l'image, sauf que dans la div qui la contient il n'y a ni class, ni id.
Je sais que c'est du code de m**** mais je travaille sur un module existant et je ne peux pas faire autrement...

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var d = getElementsBySelector('div.classe1');
var nodelist = d[0].getElementsByTagName("img");
nodelist.item(0).src="nouveau_src_2.jpg";

Mais en vain, j'ai vraiment besoin de modifier ce src... si quelqu'un peut m'aider

Merci d'avance

[cli16]

Bon... le boulet

J'avais fait une erreur de nom de variable

Ca marche !!

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var d = getElementsBySelector('div.classe1');
var nodelist = v[0].getElementsByTagName("img");

Il y a comme un problème de nom de variable
Et au passage, je n'envie pas ceux qui devront se pencher sur ton code dans le futur, parce que retrouver le rôle des variables v, d etc. merci du cadeau