Discussion :

[patricktoulon]

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

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

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 :

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

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

[melka one]

jour

c'est un objet qu'il faut utiliser

Code :

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

var ico={}

[SpaceFrog]

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

[patricktoulon]

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

Code :

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

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

[patricktoulon]

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 :

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

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

[patricktoulon]

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

[patricktoulon]

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 :

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

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 :

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

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 );
}

[NoSmoking]

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

Code css :

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

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

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

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 :

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

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 :

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

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];
}

[SpaceFrog]

Jquery c'est du js ...

Code :

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

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/

[patricktoulon]

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

[SpaceFrog]

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

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

[patricktoulon]

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 :

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
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
obligé si je veux que mon userform,HTA,html soit transportable

[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 ...

[patricktoulon]

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