carte cliquable forum => lien

2 participants

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

Résolu carte cliquable forum => lien

Message par pierre du 31 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

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 Dim 4 Aoû 2013 - 21:06

up
pierre du 31

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 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

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 cliquable forum => lien

Message par pierre du 31 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

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 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

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 cliquable forum => lien

Message par pierre du 31 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

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 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:
- validez


Voilà, en espérant que ça vous aide ! ^^
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 cliquable forum => lien

Message par pierre du 31 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

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 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

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 cliquable forum => lien

Message par pierre du 31 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

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

- Sujets similaires

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