carte zonée

3 participants

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

Résolu carte zonée

Message par MlleAlys Dim 16 Déc 2012 - 17:35

Bonjour/bonsoir !

Voilà, suite à ce sujet là (il y a... heu... plus d'un mois), j'avais réussi à faire une carte réactive mettant en valeur chaque zone sur la carte au passage de la souris, et chaque zone ayant un lien conduisant à sa description...

Sauf que, voilà quelques jours de cela, je me suis rendue compte que cela ne fonctionnait plus ! Crying or Very sad Plus précisément, les liens fonctionnent toujours, mais pas la mise en valeur de la zone ! Je ne sais pas exactement depuis combien de temps, et surtout je ne vois absolumment pas ce que j'ai pu changer qui aurait eu une influence sur ce code (je n'ai touché ni au code java, ni au code html du post)...
De plus je n'y connais rien en javascript...

Bref, je ne sais absolument pas d'où peut venir le problème !

Voici un lien vers le post en question : un peu de géographie (estrelane rpg)

Le code java est bien sur toutes les pages, et la gestion des javascript activée.


voilà mon code javascript :
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();
});


$.fn.maphilight.defaults = {
fill: true,
fillColor: 'ffffff',
fillOpacity: 0.03,
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: 12,
shadowColor: '000000',
shadowOpacity: 0.96,
shadowPosition: 'outside',
shadowFrom: false
}

et mon code html :
Code:
<div align="center">
<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="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="Les Terres du Centre" title="Les Terres 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="Les Terres du Sud" title="Les Terres 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>
</div>


Merci d'avance si vous vous penchez sur mon souci ! =)
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: carte zonée

Message par MlleAlys Mar 18 Déc 2012 - 17:19

up
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: carte zonée

Message par Automne Mar 18 Déc 2012 - 17:37

Bonjour,

les liens fonctionnent toujours, mais pas la mise en valeur de la zone !

Sa veut dire quoi la mise en valeur de la forme? Les liens fonctionnent, mais je ne comprend pas se qui ne fonctionne pas Wink
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte zonée

Message par MlleAlys Mar 18 Déc 2012 - 17:51

normalement il y a une mise en valeur de la zone au passage de la souris sur cette dernière :
illustration de ce que ça donnait à peu près :

(pour les paramètres, c'est bien la seule chose que j'ai comprise du code java, c'est la dernière partie :
Code:
$.fn.maphilight.defaults = {
fill: true,
fillColor: 'ffffff',
fillOpacity: 0.03,
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: 12,
shadowColor: '000000',
shadowOpacity: 0.96,
shadowPosition: 'outside',
shadowFrom: false
}
en gros remplir la zone de blanc en opacité 3% (plus un petit effet d'ombre, etc).
j'ai déjà essayé de remodifier les valeurs (même si je ne les avais pas changé depuis que ça fonctionnait), mais rien n'y fait.
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: carte zonée

Message par Adam_sfp Mar 18 Déc 2012 - 19:24

Bonsoir

Si vous regardez vous avez déjà les valeurs dans le script
dans cette partie
Code:
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);

cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte zonée

Message par MlleAlys Mar 18 Déc 2012 - 19:27

oui mais comme je ne comprends pas grand chose au code, c'est assez fatiguant de les retrouver à chaque fois, donc je les ai renotées en dessous pour les avoir plus rapidement. ^^"

mais là n'est pas le souci : la fonction n'a tout simplement plus l'air de s'appliquer... je veux dire, quand que je change dans le code java, ça ne change rien au final à ma carte ! ><"


Dernière édition par MlleAlys le Mar 18 Déc 2012 - 23:34, édité 1 fois
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: carte zonée

Message par Adam_sfp Mar 18 Déc 2012 - 19:52

Bonsoir

Si je prend le script du post initial celui ci
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();
    });

et si je modifie les valeurs dans cette partie.
Code:
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);

cela fonctionne...


Vous pouvez mettre le script de cette manière si c'est plus facile pour changer les valeurs ..

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:"4A9ED3",
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();
    });
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte zonée

Message par MlleAlys Mar 18 Déc 2012 - 23:40

merci, j'ai changé le code par le dernier, mais ça ne fonctionne toujours pas : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#13

cela veut il dire que le problème vient du code html ? ou quelque chose d'extérieur lié au javascript en général ?

Parce que ce que je ne comprends pas, c'est que ça fonctionnait et que je n'ai rien changé depuis,ni le html ni le java... ><" Mais comme j'ai fait d'autres modifications sur les thèmes et tout ça... T-T

EDIT : je viens de vérifier, tous mes codes java fonctionnent sauf celui là et le sélecteur de couleur (mais j'ai cru voir d'autres sujets sur le forum des forums concernant ce dernier point ?)
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: carte zonée

Message par Automne Mer 19 Déc 2012 - 2:26

bonjour,

Cela a l'air de fonctionner, voilà se que je vois https://i.servimg.com/u/f10/16/59/52/48/sans_t17.jpg
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte zonée

Message par MlleAlys Mer 19 Déc 2012 - 16:55

oui c'est étrange, je le vois également à présent... alors que je suis certaine qu'avant non ! ><" (j'avais même demandé à d'autres personnes...)
bref, j'espère que ça durera cette fois, merci beaucoup en tout cas !! =D

résolu
MlleAlys

MlleAlys
Membre actif

Messages : 5767
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

- Sujets similaires

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