Carte de France cliquable

**le Dim Juil 18, 2010 17:42**

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

**le Dim Juil 18, 2010 19:39**

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

**le Dim Juil 18, 2010 22:37**

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

**le Dim Juil 18, 2010 23:38**

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

**le Lun Juil 19, 2010 10:04**

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

**le Lun Juil 19, 2010 10:17**

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.

**le Lun Juil 19, 2010 10:28**

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.

**le Lun Juil 19, 2010 10:33**

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

**le Lun Juil 19, 2010 11:35**

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

**le Lun Juil 19, 2010 12:30**

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

**le Lun Juil 19, 2010 12:35**

TrafficLover a écrit: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

**le Ven Nov 19, 2010 0:54**

Salut!

Si non tu peux toujours essayer ce site:

http://moteurdereference.fr/telecharger.php

Tout est prêt.

**le Mar Déc 14, 2010 18:57**

spout a écrit: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 ;=)

**le Ven Déc 17, 2010 19:55**

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

**le Ven Déc 17, 2010 20:01**

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

Carte de France cliquable

Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Re: Carte de France cliquable

Lectures recommandées sur ce thème :

Qui est en ligne