carte cliquable forum => lien

[pierre du 31]

Bonjours, j'ai essayer d'installer un script sur mon forum mais celui-ci ne fonctionne pas (flash, html)

j'aimerai savoir si il existe une solution pour faire un style: http://dbmwebdesign.fr/Tutos/carte-interactive/carte-interactive-demo.html

En html5, css3 et javascript.

J'avais anciennement un code pour une carte mais il ne fonctionne plus et je veux modifier l’apparence de la carte.

J'ai déjà un html:

Code:

<?xml version="1.0" encoding="UTF-8"?>
-<france>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[01 - Ain]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[02 - Aisne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[03 - Allier]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[04 - Alpes de Hautes Provence]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[05 - Hautes Alpes]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[06 - Alpes Maritimes]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[07 - Ardeche]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[08 - Ardennes]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[09 - Ariege]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[10 - Aube]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[11 - Aude]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[12 - Aveyron]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[13 - Bouches du Rhone]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[14 - Calvados]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[15 - Cantal]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[16 - charente]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">+<texte>

<url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[18 - Cher]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[19 - Correze]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[2A - Corse du Sud]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[2B - Haute Corse]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[21 - Cotes d or]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[22 - Cotes d armor]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[23 - Creuse]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[24 - Dordogne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[25 - Douds]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[26 - Drome]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[27 - Eure]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[28 - Eure et Loir]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[29 - Finistere]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[30 - Gard]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[31 - Haute Garonne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[32 - Gers]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[33 - Gironde]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[34 - Herault]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[35 - Ille et Vilaine]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[36 - Indre]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[37 - Indre et Loire]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[38 - Isere]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[39 - Jura]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[40 - Landes]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[41 - Loir et Cher]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[42 - Loire]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[43 - Haute Loire]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[44 - Loire Atlantique]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[45 - Loiret]]>
</texte><url>http://activeden.net/user/LGLab</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[46 - Lot]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[47 - Lot et Garonne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[48 - Lozere]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[49 - Maine et Loire]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[50 - Manche]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[51 - Marne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[52 - Haute Marne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[53 - Mayenne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[54 - Meurthe et Moselle]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[55 - Meuse]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[56 - Morbihan]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[57 - Moselle]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[58 - Nievre]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[59 - Nord]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[60 - Oise]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[61 - Orne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[62 - Pas de Calais]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[63 - Puy de Dome]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[64 - Pyrennees Atlantique]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[65 - Hautes Pyrennees]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[66 - Pyrennees Orientales]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[67 - Bas Rhin]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[68 - Haut rhin]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[69 - Rhone]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[70 - Haute Saone]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[71 - Saone et Loire]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[72 - Sarthe]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[73 - Savoie]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[74 - Haute Savoie]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[75 - Paris]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[76 - Seine Maritime]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[77 - Seine et Marne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[78 - Yvelines]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[79 - Deux sevres]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[80 - Somme]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[81 - Tarn]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[82 - Tarn et Garonne]]>
</texte><url>v</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[83 - Var]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[84 - Vaucluse]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[85 - Vendee]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[86 - Vienne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[87 - Haute Vienne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[88 - Vosges]]>
</texte><url>v</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[89 - Yonne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[90 - Territoire de Belfort]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[91 - Essonne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[92 - Hauts de Seine]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[93 - Seine Saint Denis]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[94 - Val de Marne]]>
</texte><url>#</url></departement>-<departement couleurDessus="B12401" couleurBase="58798D">-<texte>
<![CDATA[95 - Val d oise]]>
</texte><url>#</url></departement></france>

[pierre du 31]

up

[MlleAlys]

Bonjour !
Est-ce que ce principe t'irait ? http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#13
S'il faut déterminer la zone de chaque département, ça risque d'être de prendre un peu de temps par contre =S

[pierre du 31]

Bonjours, c'est exactement ce que je veux à peu de chose près, mais je ne fais pas le difficile (tout doit être dans la CSS après je pense).

Merci.

[MlleAlys]

En fait dans mon cas, il s'agit d'un javascript avec un code html, pas de css...

Il faut juste que je retrouve le générateur qui m'a permis de dessiner les zones...
AH ! voilà !! http://www.image-maps.com/
Il faut charger l'image, puis dessiner chaque zone... ça prend du temps, surtout si on veut que ça soit à peut près esthétique ! ^^"
Et puis après on obtient le code (html au moins, au pire j'ai le javascript sur mon propre forum ^^)
J'avais eu quelques difficultés à comprendre au départ, donc n'hésitez pas =S
(au cas où, voilà le sujet dans lequel j'avais demandé de l'aide )

[pierre du 31]

Par contre pour faire les endroit cliquable, il faut utiliser quoi? les points? les carrés?

[MlleAlys]

Pour faire plus simple, voici le code html que j'ai utilisé :

Code:

<img class="map" src="URL DE LA CARTE" width="LARGEUR" height="HAUTEUR" usemap="#carte">
<map name="carte">
   <area shape="poly" coords="COORDONNEES DE LA ZONE 1" href="LIEN DE LA ZONE 1" alt="NOM DE LA ZONE 1" title="NOM DE LA ZONE 1"  />
   <area shape="poly" coords="COORDONNEES DE LA ZONE 2" href="LIEN DE LA ZONE 2" alt="NOM DE LA ZONE 2" title="NOM DE LA ZONE 2"  />
</map>

Il faut ajouter autant de balises <area... /> que de zones, ici j'en ai mis deux ^^
NOM DE LA ZONE c'est le nom qui va s'afficher au survol
LIEN DE LA ZONE c'est le lien qui s'ouvre quand on clique sur la zone
COORDONNEES DE LA ZONE correspond à l'ensemble des coordonnées des points délimitant la zone, par exemple coords="177,290,181,285,189,280,194,279,198,275" (ici 10 coordonnées, 2 par point donc 5 points, donc ma zone est un pentagone ^^)


Pour trouver les coordonnées des zones, j'ai utilisé le générateur donné plus tôt : Il faut utiliser l'outil "custom shape" et ouvrir la fenêtre un peu plus bas "Image/Map Coordinates". Puis il faut cliquer sur tout le contour de la zone (des petits points apparaissent, et leurs coordonnées sont reportées dans la fenêtre "Image/Map Coordinates").
Quand la délimitation de la zone est terminée, tu copies d'un coup toutes les coordonnées, et tu les mets dans le code html plus haut ^^

Et, enfin, il y a le javascript :
- Dans modules >  html & javascript > gestion des codes javascript,
- vérifier que la gestion des codes est cochée sur OUI
- créer un nouveau code
- lui donner un nom ("carte" par exemple xP)
- cocher "sur toutes les pages"
- coller ce code :

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();
    });

Tout à la fin du code, vous pouvez personnaliser les couleurs, etc. j'avoue que je ne sais plus bien à quoi chaque option correspond...

Spoiler:

- validez


Voilà, en espérant que ça vous aide ! ^^

[pierre du 31]

Merci, je vais essayer une autre technique par un ftp et un serveur, en y hébergeant les fichier et en faisant une iframe sur la page.

Je vous recontacte si jamais ça ne fonctionne pas

[MlleAlys]

pas de souci ! ^^
(si c'est plus simple et plus rapide que ça, ça vaut le coup d'essayer ! x))

[pierre du 31]

Parfait, çà fonctionne

http://peche-lac-riviere.forumactif.fr/h25-carte-v2

tout simplement avec le SWF héberger et le codage qui va avec ça donne le rendu parfait