carte cliquable forum => lien

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

Résolu carte cliquable forum => lien

Message par pierre du 31 le Sam 3 Aoû 2013 - 13:02

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>


Dernière édition par pierre du 31 le Mar 6 Aoû 2013 - 14:16, édité 1 fois

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte cliquable forum => lien

Message par pierre du 31 le Dim 4 Aoû 2013 - 21:06

up

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte cliquable forum => lien

Message par MlleAlys le Dim 4 Aoû 2013 - 21:52

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

MlleAlys
+ Hyperactif +

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

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

Résolu Re: carte cliquable forum => lien

Message par pierre du 31 le Dim 4 Aoû 2013 - 22:01

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.

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte cliquable forum => lien

Message par MlleAlys le Dim 4 Aoû 2013 - 22:18

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 )

MlleAlys
+ Hyperactif +

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

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

Résolu Re: carte cliquable forum => lien

Message par pierre du 31 le Lun 5 Aoû 2013 - 23:25

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

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte cliquable forum => lien

Message par MlleAlys le Mar 6 Aoû 2013 - 0:06

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:
fill:true,   <=  "true" pour remplir la zone au survol, "false" sinon
fillColor:"ffffff",   <= code de la couleur de remplissage
fillOpacity:0.15,    <= opacité de la couleur de remplissage (0: transparent; 1: opaque)
stroke:false,  <= "true" pour tracer le contour de la zone au survol, "false" sinon
strokeColor:"ff0000",  <= couleur du contour
strokeOpacity:1,  <= opacité du contour
strokeWidth:1,  <= largeur du contour
fade:true, <= pour flouter un peu les contours il me semble
alwaysOn:false, <= je sais pas
neverOn:false, <= je sais pas
groupBy:false, <= je sais pas
wrapClass:true, <= je sais pas
shadow:true, <= "true" pour ajouter une ombre à la zone au survol, "false" sinon
shadowX:0,  <= décalage horizontal de l'ombre par rapport à la zone en px
shadowY:0,  <= décalage vertical de l'ombre par rapport à la zone en px
shadowRadius:10,  <= étendue de l'ombre
shadowColor:"000000",  <= couleur de l'ombre
shadowOpacity:0.8,  <= opacité de l'ombre
shadowPosition:"outside",   <= position de l'ombre (inside: vers l'intérieur de la zone, ou outside: extérieur)
shadowFrom:false  <= je sais pas
- validez


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

MlleAlys
+ Hyperactif +

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

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

Résolu Re: carte cliquable forum => lien

Message par pierre du 31 le Mar 6 Aoû 2013 - 13:28

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 Smile

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: carte cliquable forum => lien

Message par MlleAlys le Mar 6 Aoû 2013 - 13:58

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

MlleAlys
+ Hyperactif +

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

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

Résolu Re: carte cliquable forum => lien

Message par pierre du 31 le Mar 6 Aoû 2013 - 14:16

Parfait, çà fonctionne Smile

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 Smile

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 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