Carte de France cliquable

juliensl · 18 Juillet 2010

Bonjour =D

Je chercherais le moyen de mettre une carte de la France sur mon site, où lorsque l'on clique sur une région, il me redirige vers la page que j'ai décider.
Ça j'ai enfin réussi à le faire.
Maintenant, au niveau graphique, je souhaiterais que lorsque je survol une région, celle si change de couleur.
Je suppose que ça doit être un script html particulier, mais je ne le trouve pas.
(je n'y connais pas grand chose en programmation, je commence à comprendre le principe html mais ce n'es pas encore ça >< )

Configuration:
-wamp
-Version de Apache: Apache/2.2.6 (Win32)
-Version de PHP: 5.2.5
-Version de MySQL: 5.0.45-community-nt
-Joomla! 1.5.19

Pouvais vous m'aider s'il vous plait.

Merci =)

TrafficLover · 18 Juillet 2010

salut salut

je pense que je peut t'aider

J'avais besoin d'une carte de la Tunisie clickable et impossible d'en trouver une, donc j'en ai fais une de A à Z.

Tu peux la trouver la http://www.tunisietopimmo.com/scripts/imagemap/map.html

tu peux t'en inspirer, recopier le code et changer les graphiques.

le plus long, c'est de faire les graphiques. J'ai utilisé une image précise de Wikipedia de la Tunisie, ensuite j'ai découpé
les régions sous Gimp, y'a un peu de boulot à faire niveau retouche, découpe etc.

Ca a du me prendre bien 4heures voir 6h en tout avec les graphiques pour la version finale de la map (pas linkée ici).

Mais bon si tu veux faire un site pro, ca vaut le coup, car maintenant j'ai une grande souplesse dans la carte, je peux
faire la taille que je veux, ou je veux dans le site, etc... j'ai tous les graphiques.

Donc je recap :

1. Si la carte te convient, tu C/C le .js dans mon script et tu C/C la structure de la page HTML
2. Tu trouve une carte de france, et tu découpe les régions sous toshop ou gimp
3. Tu crée ton imagemap en HTML avec des outil sur le web qui vont simplifier la tache de trouver les coordonnées sur une image
4. Tu up les images, etc

c bon

SPOILER :
Si tu veux pas te prendre la tete, tu va sur leboncoin et tu fait un C/C de toute leur carte et de leur script.

Mais bon.

Sinon moins hardcore, tu dois pouvoir trouver des script tout fait prêts à utiliser gratuits sur le web, tu cherche pour "script carte interactive France" ou kkchose comme ca

/kiss

juliensl · 18 Juillet 2010

Yop =)

merci pour ce javascript, je pense qu'il fera l'affaire

juste une question, je ne connais pas la programmation, donc je voulais juste savoir ce que je devais mettre à la place de l'url de cette ligne :

<script type="text/javascript" src="http://tunisietopimmo.com/scripts/imagemap/html/jquery-1.3.2.min.js"></script>

Merci beaucoup

TrafficLover · 19 Juillet 2010

C'est la librairie Jquery utilisée pour la carte

Il suffit de copier le fichier jquery-1.3.2.min.js sur ton serveur (tu peux ouvrir le fichier, copier/coller tout le texte et le mettre dans 1 fichier sur ton serveur) et tu appel ce script dans ta pages (tu rajoute la ligne suivante dans les balise <head> de ta page)

<script type="text/javascript" src="[ADDRESSE DE TON SERVEUR OU EST LE SCRIPT]/jquery-1.3.2.min.js"></script>

et le tour est joué!

si le javascript ne marche pas, peut etre c'est que tu utilise un autre script qui entre en conflit avec la lib, essaye avant de le faire marcher sur une page simple vierge html

Voilou bonne soirée

juliensl · 19 Juillet 2010

Salut!

J'ai décider de faire un test d'abord directement avec ta carte de la tunisie.

mon problème, c'est que j'ai l'impression qu'il ne trouve pas l'image (petit carré avec une croix rouge pour IE)

voici ce que j'ai mis dans le script:

<img src='images\transparentMap.gif' width='215' height='436' border='0' alt='' usemap='#regionMapView' class='map' />
<map name='regionMapView' id='regionMapView'>

<img src='images\mvSud.gif' width='215' height='436' border='0' class='region sud-map' alt='Sud' />
<img src='images\mvSudOuest.gif' width='215' height='436' border='0' class='region sudouest-map' alt='Sud' />
<img src='images\mvCentre.gif' width='215' height='436' border='0' class='region centre-map' alt='Centre' />
<img src='images\mvNordEst.gif' width='215' height='436' border='0' class='region nordest-map' alt='Nord Est' />
<img src='images\mvNord.gif' width='215' height='436' border='0' class='region nord-map' alt='Nord' /
<img src='images\mvOuest.gif' width='215' height='436' border='0' class='region ouest-map' alt='Ouest' /

<img src="images\mvTunisie.gif" width="215" height="436" class="regionBg" />

si il y a d'autre chose à changer au niveau de l'affichage des images, je suis tout ouï =)
(j'ai charger les image dans mon dossier de média, donc c'est pas à cause de ça

)

Merci a++

spout · 19 Juillet 2010

Il y a un plugin jQuery pour faire des image map sans images pour le rollover:
http://davidlynch.org/js/maphilight/docs/
http://davidlynch.org/js/maphilight/docs/demo_usa.html

Pour faire simple, il faut trouver un fichier SVG qui contient déjà tous les "chemins" (frontières régionales) et transformer les "chemins" en image map dans Illustrator.

polweb · 19 Juillet 2010

bONJOUR?

La bibliothèque jquery c'est très bien. Mais attention si c'est essentiel à la navigation l'internaute peux avoir désactivé le javascript. Tu peux aussi envisager de lle faire en CSS c'est pas très compliqué;

A plus.

juliensl · 19 Juillet 2010

la page que tu ma donné est tout simplement ... incompréhensible ><

Je suis nul en programmation, j'ai fait a peine 1 mois de C et c'est tout xD

c'est pour ça que je cherche un script tout fait où il ne reste plus qu'à modifier les images et destination.

Merci quand même pour ton aide spout =)

(polweb, moi ça me dirait bien de le faire en CSS, le seul truc c'est que je ne sais pas programmer >< )

TrafficLover · 19 Juillet 2010

Plopz

si les images ne s''affichent pas, c'est que le script ne les trouve pas

vérifie les url de tes images dans ta pages web, tu peux dowload toutes les images ici http://www.tunisietopimmo.com/scripts/imagemap/

et les mettre sur ton serv, avec tes bonnes urls

Il faut donc que tu fasse un dossier "images" là ou est ta page web, et tu met toutes les images dedans, c'est jsute un probleme d'emplacement des images

@spout merci pour ce link je vais jeter un coup d'oeil voir ce que ca donner

@polweb interessante ta technique ca m'interesse car en effet si je peux me passer sur .js ce n'est que mieux.
As tu un exemple de code qui fonctionne avec une imagemap clickable en CSS? je ne vois pas trop bien comment c'est possible de faire.

/kiss

juliensl · 19 Juillet 2010

j'avais mis images\mvcentre.gif au lieu de images/mvcentre.gif ><

Le truc maintenant, c'est qu'il m'affiche toutes les images les unes après les autres ><

Que faire ?

Mici =)

Leonick · 19 Juillet 2010

TrafficLover a dit:
As tu un exemple de code qui fonctionne avec une imagemap clickable en CSS? je ne vois pas trop bien comment c'est possible de faire.

en fait, tu utilises le imagemap, comme actuellement, sauf qu'ensuite il te suffit d'utiliser la propriété :hover de chacun de tes id pour modifier au survol

karly78 · 19 Novembre 2010

Salut!

Si non tu peux toujours essayer ce site:

http://moteurdereference.fr/telecharger.php

Tout est prêt.

TrafficLover · 14 Décembre 2010

spout a dit:
Il y a un plugin jQuery pour faire des image map sans images pour le rollover:
http://davidlynch.org/js/maphilight/docs/
http://davidlynch.org/js/maphilight/docs/demo_usa.html

Pour faire simple, il faut trouver un fichier SVG qui contient déjà tous les "chemins" (frontières régionales) et transformer les "chemins" en image map dans Illustrator.

Super librairie !

J'ai besoin de refaire une map de la Tunisie plus "pro et clean" je vais essayer ;=)

TrafficLover · 17 Décembre 2010

Pour ceux que ca interesse, le résultat est la est je suis pas mécontent de moi

Le lib Jquery est très simple à utiliser, le plus long est de détourer les zones de la carte sous GImp ou toshop

fredfan · 17 Décembre 2010

C'est chouette, bravo
Si tu faisais s'allumer le bout de carte quand on survole le nom dans la liste à droite et vice versa, ce serait parfait

TrafficLover · 17 Décembre 2010

Trés bonne idée! je n'y avais meme pas pensé en plus, j'avais pensé le contraire, faire s'allumer les noms quand on survole la carte, mais comme tu dis, c beaucoup mieux, je note ca, je note ca...

Sinon y'a aussi une autre lib jquery dans le meme style http://www.netzgesta.de/mapper/ ca vaut vraiment le coup de jetter 1 oeil aussi c pas mal, en fait y'a un genre de bulle qui survole la map, j'aime bien, ca me donne des idées,

BON APPETIT

:mrgreen: