carte zonée qui ne fonctionne plus...

par MlleAlys Jeu 7 Fév 2013 - 0:28

Bonsoir !

Alors... c'est un problème que j'ai déjà eu et qui se répète à nouveau, et je ne comprends toujours pas pourquoi...

J'avais réussi suite à ce sujet à faire une carte zonée réactive : la zone de la carte où on passe la souris est mise en valeur avec un remplissage et/ou un contour, et un lien permet directement d'aller à la zone. Le codage se compose d'un code html (dans le sujet), et d'un code java-script.

Seulement un mois plus tard, la carte ne fonctionnait plus, sans que je comprenne pourquoi : je n'avais rien touché, ni au code html ni au JS... J'ai exposé mon problème dans ce sujet, nous avons essayé plusieurs manipulations... jusqu'à ce que la carte fonctionne soudain à nouveau, sans que je sache si c'était grâce à une des modifications faite ou autre chose...
Bref je m'en fichais ça fonctionnait à nouveau !

Sauf que là, paf, ça recommence : les liens fonctionnent, mais pas la mise en valeur (maplighting) ! Je n'ai absolument pas touché au java-script (je n'y comprends rien, donc à par les options de mise en valeur genre couleur tout ça, je n'avais rien modifié, et je n'y ai pas retouché depuis ! ^^").
La seule chose, j'avais édité un peu avant le code html pour juste changer le nom d'un des liens... Mais j'ai beau relire le code, je ne vois pas ce que j'aurais pu modifier par mégarde en même temps...

Je viens donc à nouveau vous demander votre aide : y a t il un souci quelque part dans un de mes codes, ou sinon, d'où vient le problème ?? Crying or Very sad

voilà la carte : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#13

voilà mon code html associé :

Code:: <img class="map" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" width="500" height="735" usemap="carte"><map name="carte"><area shape="poly" coords="180,199,169,203,162,208,151,208,142,210,133,211,126,213,122,204,121,195,122,187,117,182,118,177,113,171,111,164,108,158,103,153,98,151,94,150,87,145,83,143,76,147,67,149,63,148,56,148,49,144,42,143,37,144,30,146,25,145,19,146,15,149,12,154,8,157,7,162,10,167,12,173,14,181,14,189,16,198,15,207,13,213,14,221,17,228,15,237,18,246,23,256,29,263,36,266,38,273,42,282,46,290,47,298,43,306,38,310,32,311,27,316,22,319,18,325,17,334,17,343,20,352,26,359,33,364,40,371,49,378,56,386,65,389,75,391,84,394,93,398,101,401,111,406,120,413,130,421,140,418,150,416,152,405,159,394,155,389,158,384,159,376,157,368,156,361,153,353,152,347,152,341,152,335,151,327,153,322,156,310,154,303,148,299,151,294,146,292,143,287,137,284,137,279,141,276,131,274,128,273,131,270,137,263,140,259,142,254,145,250,151,247,144,248,151,241,155,234,160,225,166,222,168,228,172,222,177,218,179,211,184,216,187,212,196,210,203,208,206,202,200,199,191,201,185,199" href="http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#15" alt="Les Terres de l'Ouest" title="Les Terres de l'Ouest" /><area shape="poly" coords="177,290,181,285,189,280,194,279,198,275,201,269,204,262,207,258,213,254,221,250,229,244,231,235,249,227,258,223,263,220,267,215,270,209,272,203,278,195,284,188,289,186,299,183,305,180,313,177,317,172,321,165,326,158,331,153,327,168,316,182,318,189,318,194,330,201,341,208,350,210,356,213,368,219,376,225,384,230,393,238,398,242,403,248,408,255,413,263,421,272,432,276,435,282,437,291,439,299,440,308,441,317,443,327,440,334,442,345,445,352,443,359,438,369,434,376,431,380,427,387,423,398,422,411,417,407,414,404,404,400,397,394,390,386,385,383,378,380,367,379,356,378,345,378,337,381,328,384,316,383,303,380,296,379,288,379,278,379,270,379,262,383,257,387,252,390,247,394,239,399,232,405,228,411,222,413,221,405,219,397,216,392,214,388,211,384,205,379,199,378,193,376,188,375,183,372,189,372,191,357,187,355,187,351,200,350,200,355,198,355,198,367,205,364,206,369,215,354,219,353,232,377,237,380,245,378,248,385,255,385,261,386,262,380,264,375,266,370,267,365,268,358,268,349,268,344,267,337,266,332,264,327,262,324,257,319,254,316,250,313,247,308,244,304,242,300,243,296,246,290,244,291,236,293,229,293,224,291,217,287,211,285,208,285,201,286,195,289,189,290,182,293,177,296" href="http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#17" alt="Le Royaume du Centre" title="Le Royaume du Centre" /><area shape="poly" coords="108,39,112,46,108,49,114,51,118,59,116,68,115,69,124,71,125,77,124,87,125,92,129,97,133,107,143,110,153,113,159,118,170,120,179,121,183,127,188,129,192,135,195,142,193,147,199,148,203,157,201,165,204,170,204,175,205,182,205,189,202,193,197,193,194,196,192,200,188,204,185,208,187,214,183,214,181,209,177,215,176,221,171,226,167,222,164,220,160,227,157,230,153,239,152,241,148,254,147,250,144,257,141,262,136,269,131,268,133,274,136,280,138,287,144,290,151,296,149,303,150,308,157,300,163,297,171,297,176,298,180,295,173,290,177,289,180,286,180,283,183,281,188,281,193,279,194,276,193,273,199,273,202,269,202,266,201,264,201,260,206,259,213,258,213,253,218,252,220,248,220,247,229,245,236,245,229,240,228,235,232,234,238,233,244,230,250,226,255,220,259,218,264,216,260,212,266,211,270,205,271,203,271,199,275,196,279,193,280,187,282,185,288,184,291,183,293,179,298,174,301,172,305,169,309,166,317,168,320,161,322,158,327,155,328,165,326,169,321,173,320,176,319,179,329,183,337,186,343,192,347,197,354,201,363,205,368,207,373,210,376,215,381,221,386,227,388,233,393,240,400,247,404,253,408,259,414,265,419,270,424,278,432,284,437,289,437,281,438,279,444,277,448,273,451,264,452,256,453,250,455,245,458,237,463,231,466,227,469,222,469,219,468,216,471,208,478,206,483,200,488,197,495,195,497,188,497,179,497,172,497,165,497,156,497,144,496,138,496,133,497,126,497,116,498,108,497,101,497,97,497,92,495,91,492,95,489,91,487,87,489,86,494,92,498,86,498,77,498,67,498,58,498,48,498,37,499,27,498,22,498,15,498,4,498,0,492,0,470,0,88,0,92,5,100,15,107,21,108,28," href="http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#16" alt="La Chaîne du Logardian" title="La Chaîne du Logardian" /><area shape="poly" coords="423,413,419,411,411,405,404,400,396,396,392,394,383,388,373,384,365,381,352,381,343,381,335,381,327,383,318,379,310,377,300,378,295,377,288,377,279,377,272,381,268,384,261,387,258,389,251,394,245,399,239,405,235,410,228,417,224,422,220,430,222,436,226,441,219,440,215,440,212,442,212,449,207,450,204,454,204,462,205,467,201,476,203,484,213,493,221,491,223,497,222,502,213,512,208,518,202,525,198,530,195,533,191,538,185,546,179,549,171,550,167,550,161,549,156,549,150,549,147,559,144,570,150,582,153,587,155,593,158,602,167,610,174,608,177,600,181,598,187,597,194,595,196,591,199,583,202,579,206,570,211,568,219,567,224,568,229,576,233,582,233,588,234,597,237,605,239,610,245,619,255,629,261,632,271,632,275,627,281,622,284,620,291,617,297,615,302,611,306,606,309,599,311,592,314,585,316,579,317,571,319,565,321,560,325,559,334,558,335,574,359,573,357,561,360,557,360,553,362,549,362,547,364,540,368,537,372,536,377,536,385,536,392,542,396,540,398,534,399,531,402,528,404,523,411,521,415,520,419,515,423,510,427,505,430,496,433,491,435,485,437,478,437,471,437,462,435,458,434,453,432,447,431,442,429,436,427,428,427,425," href="http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#18" alt="Le Royaume du Sud" title="Le Royaume du Sud" /><area shape="poly" coords="85,0,88,6,97,15,107,28,110,37,113,45,119,50,122,57,116,64,118,71,125,73,124,80,126,90,131,101,133,109,141,111,146,113,153,115,158,119,166,119,174,120,179,126,185,131,189,130,194,139,196,144,202,150,203,157,203,163,205,171,207,182,205,189,199,190,194,192,191,200,183,199,177,197,171,202,165,207,159,209,153,210,146,213,138,215,132,216,126,217,125,211,120,209,120,204,122,195,121,186,119,182,117,173,115,171,111,162,107,157,104,152,98,149,92,148,86,145,83,143,78,146,68,149,63,148,56,145,48,144,41,144,37,148,29,147,23,148,17,153,10,158,10,165,14,175,15,181,15,192,14,204,13,210,13,217,16,225,18,236,18,247,19,254,29,261,35,264,38,270,41,277,44,282,46,288,46,297,45,303,40,308,36,312,29,316,19,320,18,326,18,337,18,344,19,351,22,356,29,360,38,367,43,374,48,377,50,387,67,389,75,391,81,392,87,394,94,398,102,402,110,405,116,409,122,413,129,419,135,419,145,416,153,414,153,408,155,402,159,397,158,394,156,389,157,386,159,379,159,373,158,367,156,362,153,355,151,345,150,335,151,326,152,319,155,313,160,305,163,304,177,302,180,297,177,293,183,291,188,291,195,289,201,288,208,287,215,286,222,288,230,293,248,286,243,304,246,309,251,313,255,318,260,324,263,329,265,336,267,344,269,352,269,360,266,366,264,373,263,384,256,385,249,384,244,377,238,380,234,376,232,376,221,356,218,355,215,356,207,366,206,363,201,365,199,358,203,355,203,350,188,349,187,355,191,370,186,371,191,377,199,379,208,384,215,390,218,395,222,408,222,417,221,422,219,430,221,436,211,438,211,446,205,452,204,462,206,469,202,473,203,481,206,486,212,492,217,503,213,508,209,513,203,519,198,525,192,531,189,536,184,543,178,547,169,547,163,547,158,548,152,549,146,548,146,554,145,560,144,568,144,577,149,582,153,590,154,596,158,605,164,610,170,613,176,608,179,601,184,597,191,594,196,593,202,587,204,580,205,575,206,572,214,567,221,570,226,575,229,582,231,589,234,598,236,603,239,615,248,625,258,629,266,633,272,631,277,625,284,620,288,617,299,612,303,609,309,603,310,595,311,590,313,581,316,573,318,569,321,563,324,560,329,558,335,557,335,573,358,571,358,555,361,552,361,546,363,542,368,538,373,537,380,537,385,539,394,543,398,536,400,528,403,522,410,522,415,520,419,515,423,511,426,502,432,494,435,483,436,475,437,468,437,461,437,454,435,449,432,444,429,437,426,429,426,417,426,410,427,402,430,394,435,387,438,383,444,373,447,367,449,363,449,354,448,350,446,345,443,340,442,335,445,328,445,322,444,316,443,310,443,300,443,291,443,285,445,283,452,279,453,273,456,267,456,258,457,249,458,245,463,239,467,235,473,228,476,225,476,221,469,219,476,214,479,209,486,203,492,201,499,204,499,734,0,734,0,0," href="http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#19" alt="Les Océans" title="Les Océans" /></map>

et voilà le code de la fonction java-script :

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:"ffffff", fillOpacity:0.15, stroke:false, strokeColor:"ff0000", strokeOpacity:1, strokeWidth:1, fade:true, alwaysOn:false, neverOn:false, groupBy:false, wrapClass:true, shadow:true, shadowX:0, shadowY:0, shadowRadius:10, shadowColor:"000000", shadowOpacity:0.8, shadowPosition:"outside", shadowFrom:false}})(jQuery); $(function() { $('.map').maphilight(); });

Merci d'avance ! ^^"

par Scoubifitz Jeu 7 Fév 2013 - 14:52

bonjour,

il manque une dièse à l' "usemap" ...

<img class="map" src="https://i.servimg.com/u/f46/12/56/43/35/cartem10.jpg" width="500" height="735" usemap="#carte">

par MlleAlys Jeu 7 Fév 2013 - 18:58

oui. il y avait le dièse, et rien ne fonctionnait, et j'ai remarqué qu'en l'enlevant les liens au moins fonctionnaient...
Je l'ai ajouté : plus rien ne fonctionne, ni les liens, ni le maplighting. Sad

merci de la réponse en tout cas ! ^^

par Scoubifitz Jeu 7 Fév 2013 - 20:28

il y a dans une de vos pages javascript ceci :

!is_ie&&$(function(){2==$("#color,#wcolor").length&&$.getScript("http://www.maonyn.com/17772.js")});

... au début d'un code , ou tout seul dans un code ...

supprimez la partie en rouge ...

par MlleAlys Jeu 7 Fév 2013 - 20:38

ok, je l'ai trouvé, j'ai supprimé la partie indiquée, mais ça ne change rien

(au passage, j'ai remarqué que les liens fonctionnaient sur internet explorer...)

par Scoubifitz Jeu 7 Fév 2013 - 21:10

ok ! j'ai trouvé ... c'est le script du redimensionnement automatique des images qui interfère avec le script ...

il faudra désactiver le redimensionnement automatique des images dans les sujets ...

général - Messages et Emails : Configuration - Redimensionnement des images : vider les champs.

par MlleAlys Jeu 7 Fév 2013 - 22:28

ça fonctionne !! Merci beaucoup beaucoup !!! :thanks:

résolu

carte zonée qui ne fonctionne plus...

carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...

Re: carte zonée qui ne fonctionne plus...