carte zonée
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
carte zonée
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 ! 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 :
et mon code html :
Merci d'avance si vous vous penchez sur mon souci ! =)
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 ! 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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: carte zonée
Bonjour,
Sa veut dire quoi la mise en valeur de la forme? Les liens fonctionnent, mais je ne comprend pas se qui ne fonctionne pas
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
Re: carte zonée
normalement il y a une mise en valeur de la zone au passage de la souris sur cette dernière :
(pour les paramètres, c'est bien la seule chose que j'ai comprise du code java, c'est la dernière partie :
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.
- 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
}
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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: carte zonée
Bonsoir
Si vous regardez vous avez déjà les valeurs dans le script
dans cette partie
cordialement.
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.
Re: carte zonée
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 ! ><"
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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: carte zonée
Bonsoir
Si je prend le script du post initial celui ci
et si je modifie les valeurs dans cette partie.
cela fonctionne...
Vous pouvez mettre le script de cette manière si c'est plus facile pour changer les valeurs ..
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();
});
Re: carte zonée
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 ?)
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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: carte zonée
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
Cela a l'air de fonctionner, voilà se que je vois https://i.servimg.com/u/f10/16/59/52/48/sans_t17.jpg
Re: carte zonée
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
bref, j'espère que ça durera cette fois, merci beaucoup en tout cas !! =D
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Sujets similaires
» carte zonée qui ne fonctionne plus...
» packtage premium carte carte bleue refusée
» Passer d'une carte intéractive html à une carte intéractive sur forumactif
» Carte interactive
» Carte des membres
» packtage premium carte carte bleue refusée
» Passer d'une carte intéractive html à une carte intéractive sur forumactif
» Carte interactive
» Carte des membres
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum