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.