carte zonée qui ne fonctionne plus...

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu carte zonée qui ne fonctionne plus...

Message par MlleAlys le 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 ! ^^"


Dernière édition par MlleAlys le Jeu 7 Fév 2013 - 22:30, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

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

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

bonjour,

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

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

Hi

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

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

Message par MlleAlys le 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 ! ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

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

Message par Scoubifitz le 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 ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

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

Message par MlleAlys le 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...)

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Scoubifitz le 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.

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

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

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

ça fonctionne !! Merci beaucoup beaucoup !!! Thanks

résolu

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum