image réactive : modification de l'image au passage de la souris

par MlleAlys Mer 31 Oct 2012 - 23:23

Bonjour/bonsoir !

j'ai suivi ce tutoriel là https://forum.forumactif.com/t231069-creer-une-image-reactive pour l'appliquer à une carte. Je me demandais comment faire en sorte, en plus des liens, de modifier l'image au passage de la souris sur chacune des zones.
une petite illustration (parce que je ne suis pas certaine d'être très claire avec mes explications =S) :
carte de base : https://i.servimg.com/u/f36/12/56/43/35/carte115.jpg
lors du survol de la zone : https://i.servimg.com/u/f46/12/56/43/35/rouge110.jpg
enfin, ce n'est qu'un exemple ^^"

merci d'avance ! Very Happy

par Invité Jeu 1 Nov 2012 - 14:22

Bonjour,

C'est tout à fait réalisable à l'aide de ce code :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image qui change au passage de la souris</title> </head> <body> <img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" /> </body> </html>

Pensez à modifier les champs de liens. Wink

En espérant vous avoir aidé,
Cordialement.

par MlleAlys Jeu 1 Nov 2012 - 14:39

merci !

mais je n'y arrive pas... est ce qu'on m'expliquer comment fonctionne le code et ce que je dois remplacer ? =S
et, qu'en est-il des zones délimitées grâce au tuto ? dois-je ajouter ce code au premier ? où ça ?

par Invité Jeu 1 Nov 2012 - 15:21

Re,

Hum...à la base le code que je vous ai donné n'a aucun rapport avec le tutoriel que vous aviez mentionné. Il vous suffit de modifier image_1.png par votre image, ainsi de suite pour la _2 et remplacez également la dernière par la même image utilisée pour le premier. Wink

Cordialement

par MlleAlys Jeu 1 Nov 2012 - 15:56

mais alors l'image change lorsqu'on passe la souris sur l'image, mais pas sur une zone particulière n'est ce pas ? c'est plutôt ça que je cherche en fait ^^"

par Invité Jeu 1 Nov 2012 - 16:02

Re,

Sur un zone particulière, je ne pense pas que cela soit réalisable...
Mais effectivement le code que je vous ai donné ne fait que changer l'image.

Cdlt

par MlleAlys Jeu 1 Nov 2012 - 16:07

ok, merci beaucoup pour la réponse en tout cas ^^

y aurait-il sinon un autre moyen de mettre en évidence la zone tracée ?

par Invité Jeu 1 Nov 2012 - 16:10

Re,

Avec de l'opacité peut-être ?
Cdlt

par MlleAlys Jeu 1 Nov 2012 - 16:19

comment ça ?

ah, sinon j'ai trouvé cela en farfouillant : http://jsfiddle.net/sb9j7/
c'est à peu près l'idée que je cherche, mais si je reconnais le code html, je n'y connais rien en javascript... ^^"
Où/comment l'installer, et comment pourrais-je l'adapter ?

par Invité Jeu 1 Nov 2012 - 16:29

Re,

un exemple assez simple pour une opacité 0.3 en dessous du stade visible ;

Code:: filter: alpha (opacity=70); -moz-opacity: 0.7; opacity: 0.7;

Pour l'effet au passage de la souris, il va nous falloir deux étapes : un code normal affiché sans évènement à déclencher de la part du visiteur, et un code au passage de la souris à l'aide de la propriété hover.
CSS

Code:: .test{ filter: alpha (opacity=100); -moz-opacity: 1.0; opacity: 1.0;} /*ici l'opacité est normale et maximale*/ .test:hover{ filter: alpha (opacity=70); -moz-opacity: 0.7; opacity: 0.7;} /*ici l'opacité est à 0.3 en dessous de un*/

HTML

Code:: <div class="test"><img src="URL DE L'IMAGE"></img></div>

Regardez le résultat vous-même. Wink

On peut ensuite ajouter d'autres effets, comme une transition évoluée dont on peut contrôler le temps.

Cordialement.

par MlleAlys Jeu 1 Nov 2012 - 16:49

mais comment l'intégrer au code du tutoriel, c'est à dire faire zone par zone sur ma carte ? ^^"

par Invité Jeu 1 Nov 2012 - 17:07

Re,

Cela me dépasse complètement... Le mieux serait d'effectuer plusieurs essais pour voir et attendre un résultat potable. :/
Mais la première technique que nous avions abordée au début de ce sujet ne vous convient-elle pas ? pourtant elle me semble bien relever le problème, puisqu'on passe à un niveau graphique qu'on allie au codage. rambo

Cdlt

par MlleAlys Jeu 1 Nov 2012 - 18:16

Eh bien, pas vraiment : je voudrais que chaque zone soit mise successivement en valeur au passage de la souris sur l'une d'elles, comme dans l'exemple des légumes mis plus haut, et non pas juste quand la souris passe sur l'image en général =S

Il faudrait juste que je comprenne comment fonctionnel'exemple des légumes de façon à l'adapter (simplifié ^^") à ma carte : Je ne comprends pas le code javascript... ><"

par Manumanu Jeu 1 Nov 2012 - 19:11

Bonjour,

Il s'agit d'une imagemap. Voici un outil qui devrait t'aider : http://www.image-maps.com/

par MlleAlys Jeu 1 Nov 2012 - 19:48

oui je connais c'est ce que j'ai utilisé pour définir mes zones...

EDIT :
aaaaaaaah !!! je crois que j'ai trouvé quelque chose, je vais essayer de suite ! \o/

par Adam_sfp Jeu 1 Nov 2012 - 20:03

Bonsoir

Vous pouvez essayer ce plugin
http://davidlynch.org/projects/maphilight/docs/
exemple
http://jsfiddle.net/adam_sfp/sb9j7/1189/

cordialement

par MlleAlys Jeu 1 Nov 2012 - 20:08

Effectivement, j'avais dû faire une erreur dans les codes. Seulement maintenant, je suis un peu perdue : Je me retrouve à la sortie avec :
- un code html : ça ok j'ai compris comment il fonctionne, enfin je crois ^^" :

Code:: <img id="Image-Maps_4201211011439537" src="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" /> <map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537"> <area shape="poly" coords="326,418,250,432,248,377,171,285,128,299,90,288,33,296,9,333,38,504,71,536,95,602,40,645,43,709,264,845,303,831,323,770,303,645,327,602,280,550,376,405," href="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" alt="" title="" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg';" /> </map>

- et un code css :

Code:: <style type="text/css"> dl.image_map { display:block; width:1000px; height:1470px; background:url(http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg); position:relative; margin:2px auto 2px auto;} </style> <dl class="image_map"> </dl>

et là j'avoue que je suis un peu perdue : il ne ressemble pas à ce que l'on met dans le css habituellement, alors comment dois-je faire exactement (surtout des balises "<dl>" ? dois je les mettre dans mon sujet ou dans le css ?) ?

EDIT :
pardon, je n'avais pas vu le nouveau post.
le premier lien ne fonctionne pas, et le deuxième... il n'y a pas de changement de l'image lors du survol de la zone, si ? =S

par Manumanu Jeu 1 Nov 2012 - 20:45

Ton second code n'est pas du CSS, c'est du HTML avec du CSS intégré dans une balise style.

Ce CSS ne correspond de toute façon pas à ton code HTML au-dessus.

par MlleAlys Jeu 1 Nov 2012 - 20:47

...

je ne comprends pas alors, à quoi correspond ce code ? Que dois je faire finalement pour obtenir sur mon sujet le résultat obtenu sur le générateur de carte ? Neutral

par Adam_sfp Jeu 1 Nov 2012 - 20:54

MlleAlys a écrit:

EDIT :
pardon, je n'avais pas vu le nouveau post.
le premier lien ne fonctionne pas, et le deuxième... il n'y a pas de changement de l'image lors du survol de la zone, si ? =S

Bonsoir

les liens fonctionnent de mon coté...
pour le 2eme essayez en cliquant sur run

par MlleAlys Jeu 1 Nov 2012 - 21:03

les deux liens fonctionnent à présent, cela devait être un problème de ma connexion...
par contre, que dois-je faire du code javascript ? ^^"

(dans le cas du générateur, le code html ne fonctionne pas, et cela m'affiche l'image de départ avec la zone puis la fin du code sous forme de texte :
image réactive : modification de l'image au passage de la souris Captur29

image réactive : modification de l'image au passage de la souris Captur29

)

par Adam_sfp Jeu 1 Nov 2012 - 21:08

Bonsoir

Poster votre code
que vous obtenez avec ce site
http://www.image-maps.com/

par MlleAlys Jeu 1 Nov 2012 - 21:14

j'obtiens ce code :

Code:: <div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_4201211011439537" src="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" /> <map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537"> <area shape="poly" coords="361,406,251,422,247,367,170,286,124,298,88,284,41,294,16,324,41,521,70,541,94,599,41,641,43,711,268,845,309,838,326,759,322,618,265,542," href="www.estrelane.forumactif.com" alt="ouest" title="ouest" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg';" /> </map> </div>

Tient, je n'arrive pas à afficher l'image que ça me donne ici Shocked

, cela n'affiche que le code :

<div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="https://i.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="361,406,251,422,247,367,170,286,124,298,88,284,41,294,16,324,41,521,70,541,94,599,41,641,43,711,268,845,309,838,326,759,322,618,265,542," href="www.estrelane.forumactif.com" alt="ouest" title="ouest" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'https://i.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'https://i.servimg.com/u/f36/12/56/43/35/carte114.jpg';" />
</map>
</div>

voilà ce que cela donne sur un de mes sujets : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#50 (ne faites pas attention à la trop grande taille de l'image ^^")

par Adam_sfp Jeu 1 Nov 2012 - 21:23

Bonsoir

Poster votre code
que vous obtenez avec ce site
http://www.image-maps.com/
*donnez le code html obtenu sans le modifier...

en suivant cette exemple
http://www.screencast.com/t/uh4XPgsQ

par MlleAlys Jeu 1 Nov 2012 - 21:39

oui, c'est bien ce que je fais depuis le début...

Code:: <div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_4201211011439537" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="500" height="735" alt="" /> <map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537"> <area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest" /> <area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" /> </map> </div>

(ça ne marche toujours pas ici : )
<div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="https://i.servimg.com/u/f46/12/56/43/35/cartem10.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="500" height="735" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest" />
<area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" />
</map>
</div>

mais cela fonctionne sur mon forum : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#50

Pour cette étape là pas de soucis, mais lorsque j'essaye en plus d'utiliser la fonction "Use Rollover Image", cela me donne ce que j'ai posté dans mon message précédent (d'où mon sujet, dans l'espoir d'avoir un autre moyen d'obtenir le même effet).

par Adam_sfp Jeu 1 Nov 2012 - 21:55

Bonsoir

C'est normal que cela ne fonctionne pas ici
il faut déjà activer le html

https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle?highlight=html

On va ensuite utiliser le script de ce site.
http://davidlynch.org/projects/maphilight/docs/
A ce moment la coller ceci dans gestion des codes javascript
En cochant sur toutes les pages.

Code:: (function(G){var B,J,C,K,N,M,I,E,H,A,L;B=document.namespaces;J=!!document.createElement("canvas").getContext;if(!(J||B)){G.fn.maphilight=function(){return this};return }if(J){E=function(O){return Math.max(0,Math.min(parseInt(O,16),255))};H=function(O,P){return"rgba("+E(O.substr(0,2))+","+E(O.substr(2,2))+","+E(O.substr(4,2))+","+P+")"};C=function(O){var P=G('<canvas style="width:'+O.width+"px;height:"+O.height+'px;"></canvas>').get(0);P.getContext("2d").clearRect(0,0,P.width,P.height);return P};var F=function(Q,O,R,P,S){P=P||0;S=S||0;Q.beginPath();if(O=="rect"){Q.rect(R[0]+P,R[1]+S,R[2]-R[0],R[3]-R[1])}else{if(O=="poly"){Q.moveTo(R[0]+P,R[1]+S);for(i=2;i<R.length;i+=2){Q.lineTo(R[i]+P,R[i+1]+S)}}else{if(O=="circ"){Q.arc(R[0]+P,R[1]+S,R[2],0,Math.PI*2,false)}}}Q.closePath()};K=function(Q,T,U,X,O){var S,P=Q.getContext("2d");if(X.shadow){P.save();if(X.shadowPosition=="inside"){F(P,T,U);P.clip()}var R=Q.width*100;var W=Q.height*100;F(P,T,U,R,W);P.shadowOffsetX=X.shadowX-R;P.shadowOffsetY=X.shadowY-W;P.shadowBlur=X.shadowRadius;P.shadowColor=H(X.shadowColor,X.shadowOpacity);var V=X.shadowFrom;if(!V){if(X.shadowPosition=="outside"){V="fill"}else{V="stroke"}}if(V=="stroke"){P.strokeStyle="rgba(0,0,0,1)";P.stroke()}else{if(V=="fill"){P.fillStyle="rgba(0,0,0,1)";P.fill()}}P.restore();if(X.shadowPosition=="outside"){P.save();F(P,T,U);P.globalCompositeOperation="destination-out";P.fillStyle="rgba(0,0,0,1);";P.fill();P.restore()}}P.save();F(P,T,U);if(X.fill){P.fillStyle=H(X.fillColor,X.fillOpacity);P.fill()}if(X.stroke){P.strokeStyle=H(X.strokeColor,X.strokeOpacity);P.lineWidth=X.strokeWidth;P.stroke()}P.restore();if(X.fade){G(Q).css("opacity",0).animate({opacity:1},100)}};N=function(O){O.getContext("2d").clearRect(0,0,O.width,O.height)}}else{C=function(O){return G('<var style="zoom:1;overflow:hidden;display:block;width:'+O.width+"px;height:"+O.height+'px;"></var>').get(0)};K=function(P,S,T,W,O){var U,V,Q,R;U='<v:fill color="#'+W.fillColor+'" opacity="'+(W.fill?W.fillOpacity:0)+'" />';V=(W.stroke?'strokeweight="'+W.strokeWidth+'" stroked="t" strokecolor="#'+W.strokeColor+'"':'stroked="f"');Q='<v:stroke opacity="'+W.strokeOpacity+'"/>';if(S=="rect"){R=G('<v:rect name="'+O+'" filled="t" '+V+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+T[0]+"px;top:"+T[1]+"px;width:"+(T[2]-T[0])+"px;height:"+(T[3]-T[1])+'px;"></v:rect>')}else{if(S=="poly"){R=G('<v:shape name="'+O+'" filled="t" '+V+' coordorigin="0,0" coordsize="'+P.width+","+P.height+'" path="m '+T[0]+","+T[1]+" l "+T.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+P.width+"px;height:"+P.height+'px;"></v:shape>')}else{if(S=="circ"){R=G('<v:oval name="'+O+'" filled="t" '+V+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(T[0]-T[2])+"px;top:"+(T[1]-T[2])+"px;width:"+(T[2]*2)+"px;height:"+(T[2]*2)+'px;"></v:oval>')}}}R.get(0).innerHTML=U+Q;G(P).append(R)};N=function(O){G(O).find("[name=highlighted]").remove()}}M=function(P){var O,Q=P.getAttribute("coords").split(",");for(O=0;O<Q.length;O++){Q[O]=parseFloat(Q[O])}return[P.getAttribute("shape").toLowerCase().substr(0,4),Q]};L=function(Q,P){var O=G(Q);return G.extend({},P,G.metadata?O.metadata():false,O.data("maphilight"))};A=function(O){if(!O.complete){return false}if(typeof O.naturalWidth!="undefined"&&O.naturalWidth==0){return false}return true};I={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;G.fn.maphilight=function(Q){Q=G.extend({},G.fn.maphilight.defaults,Q);if(!J&&G.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var P=document.createStyleSheet();var O=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];G.each(O,function(){P.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var W,T,a,S,V,X,Z,U,Y;W=G(this);if(!A(this)){return window.setTimeout(function(){W.maphilight(Q)},200)}a=G.extend({},Q,G.metadata?W.metadata():false,W.data("maphilight"));Y=W.get(0).getAttribute("usemap");S=G('map[name="'+Y.substr(1)+'"]');if(!(W.is("img")&&Y&&S.size()>0)){return }if(W.hasClass("maphilighted")){var R=W.parent();W.insertBefore(R);R.remove();G(S).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}T=G("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(a.wrapClass){if(a.wrapClass===true){T.addClass(G(this).attr("class"))}else{T.addClass(a.wrapClass)}}W.before(T).css("opacity",0).css(I).remove();if(G.browser.msie){W.css("filter","Alpha(opacity=0)")}T.append(W);V=C(this);G(V).css(I);V.height=this.height;V.width=this.width;Z=function(f){var c,d;d=L(this,a);if(!d.neverOn&&!d.alwaysOn){c=M(this);K(V,c[0],c[1],d,"highlighted");if(d.groupBy){var b;if(/^[a-zA-Z][-a-zA-Z]+$/.test(d.groupBy)){b=S.find("area["+d.groupBy+'="'+G(this).attr(d.groupBy)+'"]')}else{b=S.find(d.groupBy)}var g=this;b.each(function(){if(this!=g){var h=L(this,a);if(!h.neverOn&&!h.alwaysOn){var e=M(this);K(V,e[0],e[1],h,"highlighted")}}})}if(!J){G(V).append("<v:rect></v:rect>")}}};G(S).bind("alwaysOn.maphilight",function(){if(X){N(X)}if(!J){G(V).empty()}G(S).find("area[coords]").each(function(){var b,c;c=L(this,a);if(c.alwaysOn){if(!X&&J){X=C(W.get());G(X).css(I);X.width=W.width();X.height=W.height();W.before(X)}c.fade=c.alwaysOnFade;b=M(this);if(J){K(X,b[0],b[1],c,"")}else{K(V,b[0],b[1],c,"")}}})});G(S).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",Z).bind("mouseout.maphilight",function(b){N(V)});W.before(V);W.addClass("maphilighted")})};G.fn.maphilight.defaults={fill:true,fillColor:"00ff00",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true,shadow:false,shadowX:0,shadowY:0,shadowRadius:6,shadowColor:"000000",shadowOpacity:0.8,shadowPosition:"outside",shadowFrom:false}})(jQuery); $(function() { $('.map').maphilight(); });

Ensuite ceci la ou vous voulez mettre votre image par exemple en page d'accueil

Code:: <img class="map" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" width="500" height="735" usemap="#usa"> <map name="usa"> <area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest" /> <area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" /> </map>

Pour obtenir ceci
http://jsfiddle.net/adam_sfp/sb9j7/1190/

*Vous pouvez changer ces valeurs dans le script pour l'adapter si besoin

$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}

par MlleAlys Jeu 1 Nov 2012 - 22:08

ça marche !!!! :youopi:
(exact pour le hatml, je n'avais même pas pensé qu'il était désactivé ici ^^")

merci beaucoup !!
et merci aussi à toi manumanu !

je ferme le sujet, merci encore !

image réactive : modification de l'image au passage de la souris

image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris

Re: image réactive : modification de l'image au passage de la souris