Affecter la src d'une image dynamiquement

Version imprimable

Bonjour a tous

j'ai un menu "emoticone" pour le quel j'ai le codebase64
je voudrais mettre le src en place dynamiquement

j'ai essayé avec une variable tableau mais je dois pas fire les chose correctement

voila le code html du menu (un div avec des images )

Code:

1
2
3
4
5
6
7
8
9
10
<DIV class="menusup" id="menuicone" style="width: 150px; height: 80px;"><IMG class="iconic" id="sourire" style="margin: 5px; width: 15px; height: 15px;" > 
           <IMG class="iconic" id="soul" style="margin: 5px; width: 15px; height: 15px;" >  
          <IMG class="iconic" id="ptdr" style="margin: 5px; width: 15px; height: 15px;" > 
           <IMG class="iconic" id="sontfous" style="margin: 5px; width: 15px; height: 15px;" >   
         <IMG class="iconic" id="rigole" style="margin: 5px; width: 15px; height: 15px;" > 
           <IMG class="iconic" id="rose" style="margin: 5px; width: 15px; height: 15px;" >  
          <IMG class="iconic" id="fleur" style="margin: 5px; width: 15px; height: 15px;" > 
           <IMG class="iconic" id="koi" style="margin: 5px; width: 15px; height: 15px;">
            <IMG class="iconic" id="cool" style="margin: 5px; width: 15px; height: 15px;" > 
           </DIV><!------------------------------------------->

voila ce que j'ai essayé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function initbout(){
var ico[]
var ico["srfleur"]="data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs="
var ico["srcool"]="data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw=="
 
var icon=document.getElementsClassName("iconic");
for (var(i=0;i<icon.length;i++){
icon[i].src=ico["sr"+icon[i].id]
}
 
 
}

ca ne semble pas fonctionner
quelqu'un aurait une idée du comment?

merci pour les retours

28/02/2017, 11h46
melka one

jour

c'est un objet qu'il faut utiliser

Code:

var ico={}
28/02/2017, 11h53
SpaceFrog

https://jsfiddle.net/g7qjo3s3/1/

merci space frog
j'en conclu quepour mettre la fleur par exemple je doive faire cela

Code:

1
2
3
4
5
6
var ico[]
ico["srfleur"] = new Image();
ico["srfleur"].src ="data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs="
 
 
document.getElementById("fleur").src=ico["srfleur"].src

28/02/2017, 12h38
patricktoulon

re

bon ben j'ai essayé de traduire ça en javascript et ca marche pas le jquery j'y comprends rien pas la peine je vais me perdre

normalement ca devrait donner ca non?

Code:

document.getElementById('fleur').setAttribute( 'src', ico['srfleur'].src );
28/02/2017, 13h05
patricktoulon

re

re
Melkaone oui un object mais encore???
tes accoldades me font penser au JSON je sais pas faire en javascript

ok melkaone
c'est bon c'est pareil que VB
reste que maintenant je dois faire correspondre dans une boucle l'id de lement a sa cle json

Code:

1
2
3
4
5
6
7
8
9
10
function initbout(){
var ico={"srfleur":"data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs="
,"srcool":"data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw=="
}
 
 
document.getElementById("fleur").setAttribute( "src", ico.srfleur );// ca ca march
 
 
}

je voudrais faire quelque chose du genre :

Code:

1
2
3
4
5
var icons=document.getElementsByClasseName("iconic")

for(var i=0;i<icons.length;i++)
icons[i].setAttribute( "src", ico."sr"+icons[i].id );
}

Bonjour,
tu gagnerais à factoriser ton code HTML-CSS, ce qui pourrait donner par exemple
pour le CSS

Code:

1
2
3
4
5
6
7
8
9
#menuicone {
  width: 150px;
  height: 80px;
}
#menuicone img {
 margin: 5px;
 width: 15px;
 height: 15px; 
}

et pour le HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="menusup" id="menuicone">
  <img id="sourire">
  <img id="soul">
  <img id="ptdr">
  <img id="sontfous">
  <img id="rigole">
  <img id="rose">
  <img id="fleur">
  <img id="koi">
  <img id="cool">
</div>

plus simple et plus lisible surtout si tu dois faire des retouche.

Concernant le javascript, l'utilisation d'un objet te facilite également la vie
soit l'objet suivant, à compléter :

Code:

1
2
3
4
5
6
7
8
9
10
11
var iconeSrc = {
  "fleur": "data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs=",
  "cool":  "data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw==",
  "sourire":"data:image/gif;base64,",
  "soul": "data:image/gif;base64,",  
  "ptdr": "data:image/gif;base64,", 
  "sontfous": "data:image/gif;base64,",
  "rigole": "data:image/gif;base64,",
  "rose": "data:image/gif;base64,",
  "koi": "data:image/gif;base64,"
}

tu noteras que la clé est l'ID de l'image destination, la fonction devient pour le coup simple

Code:

1
2
3
4
5
6
7
var divImage = document.querySelector('#menuicone');
var oImages = divImage.querySelectorAll('img');
var i, nb = oImages.length;
 
for (i = 0; i < nb; i += 1) {
  oImages[i].src = iconeSrc[oImages[i].id];
}

28/02/2017, 15h01
SpaceFrog

Jquery c'est du js ...

Code:

document.getElementById('fleur').src= ico['srfleur'].src ;

fonctionne: https://jsfiddle.net/g7qjo3s3/2/

Ceci étant je ne vois pas l'intéret d'avoir tout les balise avec tous les id
une seule balise img, un cloneNode une attribution de scr et un append
https://jsfiddle.net/g7qjo3s3/3/
28/02/2017, 15h28
patricktoulon

re

re
merci pour les retours
@spacefrog je te jure que ton 2d exemple ne marche pas dans un fichier html chez moi
c'est la méthode que j'employais en ayant traduit ta version jquery
les id j'en ai besoins pour leur donner un evenement(addeventlistener )

c'est peut etre parceque je constitue le nom de ico en deux fois "sr"+element.id
je vais peut etre utiliser les même noms comme ca se sera plus simple
je vais tester les deux model pour apprendre en js bien sur jquery je veux meme pas en entendre parler j'ai deja assez de mal avec la syntaxe js je vais m'en donner encore plus hein ...

Melka one bien reçu ton code je le comprends bien

bon j’étudie tout ca et reviens tout a l'heure
merci encore messieux
28/02/2017, 15h40
SpaceFrog

Ben affecte les events à la création ... pas besoin d'id ..

https://jsfiddle.net/g7qjo3s3/4/

bon j'ai tester la methode Melka one et elle fonctionne nickel pour le src
j'ai fini par comprendre pourquoi ca ne fonctionnait pas
avec l'object
on ne peut pas faire
object.element.id
si on doit utiliser une variable ou l'incateur d'un id
mais on fera
object[element.id]
ca c'est pigé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var icob64 = {  "fleur": "data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs=",
  "cool":  "data:image/gif;base64,R0lGODlhDwAPALMNAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//////lAP//6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw==",
  "sourire":"data:image/gif;base64,R0lGODlhDwAPALMNAEVFRf/qAAAAAP/////OAP/JAP+0AP6dAP/+k//9E///x///6//lAAAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkJap241aUQIhcGcEkSnMQBTEBnnnC6aogpwHcAasqbB7mCCoD4wXCGSlHAbDqTANtgSh0IClACsEq9qjRaAfe6AxMYTvKXQiAU3m9ZpmKoG4YZlmU2iQAAOw==",
  "soul": "data:image/gif;base64,R0lGODlhDwAPAOMFAEVFRf/qAAAAAP/OAP/JAP////6dAP+0AP/+k///x//9E//lAP//6////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAPACwAAAAADwAPAAAEXvBJCWqd+FWWEBoXBnCKEpyDAUxAJwhn8KarhghFAeM6qCW8XFCnAtx0uGTyUEHIXjsogQkwPWOvwLQyiHlPC4JK0/2eCD7yYAGAAtBjymBAqNdpmcphfyhmWBY1ExEAIfkEBQoADwAsBAAFAAgAAwAABAqwiFnkvFbYoGcEACH5BAUKAA8ALAQABAAHAAQAAAQL8IlH5ayz1Kf5LhEAIfkEBTIADwAsBAAEAAgAAwAABApQvPkkLfThgiePACH5BAUUAA8ALAkACgACAAIAAAQE8AnxIgAh+QQFCgAPACwEAAQABwAEAAAEDbCUR2UB9IErMOhahkUAIfkEBQEADwAsAgACAAsABwAABBzwyUlnCBZLdXHHiiAKwSgQkvAU66NOIvxKVyZFACH5BAUBAA8ALAIAAgALAAYAAAQW8EklX6g4622D758iSEIwPgIBXt4XAQAh+QQBAQAPACwCAAIACwAGAAAEEvDJSau9VmjxNheFVIDit3VnBAA7",  
  "ptdr": "data:image/gif;base64,R0lGODlhFAAPAKECAAAAAP/SAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBQADACwAAAAAFAAPAAACR5yPoIoJt0CYLNEBRNbzGhk82caFnvRgowaaKYppggy2YrjMa3uhuKzjhTA4FEk4xHw6i44zZXFKkw2kFFqdMhtVYYXbXTQKACH5BAkFAAMALAAAAAAUAA8AAAJFnI+gip0bImvgKIGBDNXycQGCEnEfKIHYmJmnVokZq5UfvLC0fZv4WrN1FkEI7+Q5HjsJpdCBcqagwSXUUuUwrwbidlAAACH5BAkFAAMALAAAAAAUAA8AAAJAnI+gip0bInNHCaFimBWMhWGSVG3fBVyi5n2SlcIaCWyZhc70xr+1bvpAgMBWiagzHpHBxo+pTEApnWSUuuAYCgAh+QQJBQADACwAAAAAFAAPAAACQJyPoIqdGyJzBwirZAB0YHtFIldx4BWKW7UB7eWqktfGrTzSro2r5MLrzRJCGYlYXDmCuGODmet4ghOpAegcFAAAIfkEBQUAAwAsAAAAABQADwAAAjacj6CKnRsicwcIC6IGdGCsbdSihKLBeeYqqRBrctkMx+hbt0l+7nnayPw6QhZwVJQcOx5SowAAIfkEBQUAAwAsAwACAA0ABQAAAhScB5IAEXBWUu7BqWhlVrXNOWFVAAAh+QQJBQADACwBAAIAEAAGAAACHpwPIJLhYNJIqr4wA1RsMac9STcCoElp3HeGpviCBQAh+QQJBQADACwBAAIAEAAHAAACItxgB8IQ4Q5UYgH3bj6sNggiS+Nh4WWRpsNCY/U8ipbRcQEAIfkECQUAAwAsAQABABAACQAAAircAHYI4XjeEUBQ92SttoUGGghFeV+4ddfHMlxqgufUxSfIrc4hYgzmKAAAIfkECQUAAwAsAQABABAACgAAAi6cP6DBoQYOEEKBFpJLc1Z8bR1FXaZYpVW4WN76nSaphpmrpF2DmK+d6TksmEABACH5BAUFAAMALAEAAQAQAAwAAAI1nD8AwaxoVJshgiSUnilcJYTh4jjguC3qeWam52WiKCUaMN8MgtP0zsP1RsCDauaqQFYbRgEAIfkECQUAAwAsCAACAAkACQAAAheUEJnAh4GMfEE65cCB0G5tMZHRPM6UFAAh+QQFBQADACwBAAEAEAANAAACNpw/oMGhaICYoFUop1gMRC8pWXWRokZZjoJqVec4rvgGycmiC5K3JNaiXHhCUQNy0x2RuZeiAAAh+QQFBQADACwHAAEACgAMAAACHRwQmQdyqoR0KKA5K9voYhd9VfBJGseQZbdaFqoUACH5BAUFAAMALAcAAQAKAAwAAAIgHB4ZB+KgoHswNfbWmjnxHlCMdnxQ8wlIqnoqUy0oWAAAIfkEBQUAAwAsAQABABAADQAAAjqcPwDBrGiAEKutCBKVqoUUZMpEVqEzktu5KNLkUii7qWvivmr3HTrMYUBGKVnPF7JVIKCciYnzhAAFACH5BAkFAAMALAgAAgAJAAkAAAIVRI4Huyn/jIlMLSgDxAdXLQCcJo4FACH5BAEFAAMALAMAAQAOAAwAAAIunA0ZG3kDhEiAhZOmrO0iLU2LE5VbhVJhxnXRujEUq7VI84oMhisWbwk+WsFAAQA7", 
  "sontfous": "data:image/gif;base64,R0lGODlhFwAPALMJAAAAAACUlACcnAClpQCtrQC1tQC9vUJCQv///wAA/wAAAAAAAAAAAAAAAAAAAAAA/yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgAJACwAAAAAFwAPAAAEZzBJCWqdOONaeiGXpgGG9xEoQFlhQrIoOgwqINxBoLoA4iMsyyqn4/2OxxYgV+v5nMCfsugqQIFBwW65q4Iss8HtZqFSYoSweEw0TwCy8FigE47StArbLQLI910ibzZsLYIZQYcYEQAAIfkECQoACQAsAAAAABcADwAABGcwSQlqnTjjWnohl6YBhvcRKCBuhgWg6DCobphUSI7UFyD8gQANoCsWe4Cg8EbMNXc6W3IJKDx3NYGKsrx9XLLB7+fq3mCEsHisDG4nr3R4LBC6RnIL27wCzPdvKxQ+bDaCG3eHEhEAACH5BAkKAAkALAAAAAAXAA8AAARkMEkJap0441p6IZemAYb3ESggboYFoOgwqGtSITjiWvZOAblg0CIoBgKqGw64zF0qR6StwFzuBDTbMflxyQbFomtLgRG+4HA0mrXFvmEB0rc5zypqac0Gz7dreGohexsuhBIRAAAh+QQJCgAJACwAAAAAFwAPAAAEZTBJCWqdOONaeiGXpgGG9xEoIG6GBaDoMKhrUiE44lr1nf+5y07l0wWDRIEyEOAAfkMBrcJsAj4u2UCpDNmYFRhBu+VWLWBKTMsVWAFnmm08q5ibFO8EwL7LazYAbVaAIy6FEhEAACH5BAkKAAkALAAAAAAXAA8AAARlMEkJap0441p6IZemAYb3ESggboYFoOgwqGtSITjiWtRuA7lg8AIQGAMBSw6IY+poFWQSUHA+XQIaBckBWWQDo3HHtcEI4LBYyta+0GCxYOqbvGSWdbJGieu1fBVyU3wjLoUSEQAAIfkECQoACQAsAAAAABcADwAABGMwSQlqnTjjWnohl6YBhvcRKCBuhgWg6DCoiRtWSI7Yt+AHAYtuOLwBgEFcDqBjLmkUIMf5dAmgtWDt45INfD6btgYjeL9gJBL7MnvBgqQr85JZ0uNV7Y3H6itwSXoiNoMTEQAAIfkECQoACQAsAAAAABcADwAABGUwSQlqnTjjWnohl6YBhvcRKDBZFmWwKDoMagIIeBCoFeIjrBYFoNv1fshfiKKzKJ++JfECKACQwVttuvqwZgMczrLbxAjgsLhYzgBkYLHAuDTPLOu2iBLP1/YrN2t1gIFChQkRAAAh+QQFCgAJACwAAAAAFwAPAAAEaTBJCWqdOONaeiEXZYWU4X1EClBCGwRrAhhjmg5DXL2wiPyIkWXzWlWASCQJ0JMBgM9fNBiTNQGFKXUk0DVlnxFu0GpZvjIbYUwu89CU27gsgA01gHWu4obj531VGhsAdHaDiE53iRIRAAA7TneJEhEAADs0qAIUxOOZgJwyw0zIQa/HXhkJcfm8qSId43MCfH1CeEkle4OEAICJdYsAgUCPhDJclSIhAAA7",
  "rigole": "data:image/gif;base64,R0lGODlhDwAPAKU9AAAAACIiIjk5OXNzczWVeTWYejebfTecfjadfzedfjeefziegDiggTmhgjiigzqlhTupiTurijyrij6ykD+zkT+0kUC1k5ycnEG4lEG6l0K8mEPAm0TAm0XEnkbHoUbIokfJokjLpEnPp0nQqErSqkrTq0vXrUzZr0zZsEzasE3asE7ds07ftE7gtVDjt1DluVHmulHnumDjvFLpvGHlvVTuwGbvxmv2zFr/zn7/2KP/46T/5L7/6////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgA/ACwAAAAADwAPAAAGgMCfUAgoBgTD5K84OslkOUBACeCASKncbRsdAjCbIoqmuwxuNQDRAvCIAKxAzgaYqQGSiqYTKqlaLzEwLitFEEWIiUUmRQ8APT2PkJIAbwANlJCRkx9FCZmTk2FLCo+SmwAZaksFCEWaRRQTq0sEBooSEbREAAUHCwwORUpeiUpBACH5BAUKAD8ALAIAAwALAAUAAAYUQJxwSBwCAEakUIlkFp+4o3R6DAIAIfkEBQoAPwAsAgAEAAsABQAABhRAnHBIHAIARqRQiWQWn7ijdHoMAgAh+QQBCgA/ACwCAAQACwAFAAAGGEAcDgAQDotCZFFpbDqJ0Ci01wNQq1RAEAA7",
  "rose": "data:image/gif;base64,R0lGODlhFAAUAKUwAAAAABADAzMBAQAxAAYwMVICAnIAAABFAABVBABvEgBrKAF2NAJXHglzQyJdUVRvY2BTMJMCAqoBAckBAP8AAOoAAMQsJwCOLACvLACVFQDPMQ2LSyWMWDWSZiurbgOpU0mPbwrYZ/8A/3GVilKpfmyzmmnLmnbTq2bjqS3ciYu4r5LLsKjl2LbTzf+Fibdzcf///////////////////////////////////////////////////////////////yH5BAEsAT8ALAAAAAAUABQAAAbWwJ9w+IsILBOikkgoRCgVgGTyeC2HAAolUJACBICJwBBRlrSUsIDSjRQqb2VWAjCsu1CKpJAkQihgegITE2l0FAZLawBPdWxgFWVLKlpeFQGIAA5XQiVregAFEgZ9nD9fEYR2iKY/KhVosQCtPxJ5AAAELEMKHAs/JAoKByYsIwAJF0QHDBonBwM/CBsrGBko0rs/IAkYKMJEAxchIdEOH8ADIR4kDSRKBwcp6w4e0vMtCAcrSwoICiM+sOigL14CflcWlBihgUEHWksyMICoRAUCFa2CAAA7",
  "koi": "data:image/gif;base64,R0lGODlhFAAUAMZPAAAAADBEczFEczNGdzRHeDRKfTVKfTdNgTdNgjdNgzhOhTlPhTxSjDxTjT1VkT5VkT5Wkj9XlD9XlT9YlkBYlUBZl0JcnENdnkRfoUVgo0VhpEZipkdip0djqEhkqUlmrUpmrktnsE1rtU5st05tuU9uulBvvFFwvFJwvFp4wF97wWWBxGmDxWqFxmyGxnGKyHKLyXaOynqSzHuSzICWzoKYz4ec0Yme0oqf0ouf0pGk1JKl1ZOm1pyu2aCx26Oz3Ke33am43qq53rK/4bPA4rbD47zI5cLN58jS6srU69DY7dPa7uTp9ent9vDz+f///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBEgB/ACwAAAAAFAAUAAAHvoB/goOEhYaHgwCKAIiHACaQJoyNiZKPkJOUioKKmI6LmZyeiQA0PUVISZuVmY8sN0FITE1KQ62SoiYtOEJJTU5LRDuTj8SWNT5GSktHQDnGjAAfmIo/izwzKtG4ABsjmDE2OgA5MiuWxX8AFtOQKSwvMC4qmJHRDhghkSYnKPugnBREwACCxL5/hgAsgHAB1KMSIkIlGoCgQYULGjoA8MAhg8REAgosYPBAwgQKET4SUhSAgIEDCVZRUgewUSAAIfkEARQAfwAsBQACAAgACgAABxqAf4KDAIOEJiaGgiaFhgCNipGSk5SGjIuNgQAh+QQBFAB/ACwFAAIACAAKAAAHF4B/goMmg4QAAIaKi4yNjo+MAIV/koKBACH5BAEUAH8ALAQAAgAJAAoAAAcYgH+Cg38AhIMAJiaHjI2Oj5CRjYmClIKBADs="
}
 
 
function initboutico(){
var icons=document.getElementsByClassName("iconic")
    for (var i=0;i<icons.length;i++){
     icons[i].src=icob64 [icons[i].id]
 
 
    }
 
}

maintenant la version spacefrog j'y retourne

pure quand je pense qu il faut que je face pareil pour les boutons :roll:
obligé si je veux que mon userform,HTA,html soit transportable

28/02/2017, 15h59
SpaceFrog

l'avantage du new Image est que l'image est déja chargée au lieu d'affecter le base64 stocké dans un JSON ...
28/02/2017, 17h05
patricktoulon

1 pièce(s) jointe(s)

re

nickel ton exemple spacefrog
j'ai tout a dapter a mon Wysiwyg y compris le bloquage du drag&replace perso nque j'ai mis au point pour mes image et div

Pièce jointe 249359