Modifier src d'une img via le nom de classe ? Possible ?

Version imprimable

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:

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:

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:

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.

Bonjour,

Code:

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

27/08/2009, 15h46
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:

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:

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 :calim2:

Merci d'avance
27/08/2009, 15h49
cli16

Bon... le boulet :aie:

J'avais fait une erreur de nom de variable

Ca marche !!
27/08/2009, 15h49
Bovino
Code:

1 2 var d = getElementsBySelector('div.classe1'); var nodelist = v[0].getElementsByTagName("img");
Il y a comme un problème de nom de variable :roll:
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 ;)