Comment faire une carte des départements français
en html ?

france-blue

Dernièrement, nous étions amenés à créer une carte de France interactive pour un site, plus précisément pour une association qui s’éparpille sur toute la France.
L’association devrait être référencée par département, et pour rendre tout cela plus interactif, il a fallu créer une carte de France sur laquelle nous pouvions directement cliquer sur un département pour accéder au membre local de l’association.

Les outils que nous allons utiliser feront partie de la suite Adobe, dont Photoshop ou Illustrator et Dreamweaver.

On note qu’il existe plusieurs façons de réaliser une carte interactive :Flash, SVG, HTML5,etc.
Celle que je vous propose dans ce tutoriel est simple, celle-ci sera faite en HTML. Toutefois, un minimum de connaissance en HTML sera nécessaire.

1 ère ÉTAPE: CRÉER UNE CARTE DE FRANCE

Pour commencer, et avant tout autre chose, il nous faut une image au format « .jpg » ou « .png » représentant la carte de France.
C’est sur cette image que nous allons poser les “coordonnées” permettant de créer un lien sur une zone précise de l’image.

Pour ma part, j’ai utilisé ce fichier illustrator, que vous pourrez télécharger ici

2 ème ÉTAPE : DÉCOUPAGE DES DÉPARTEMENTS

Notre but lors de la découpe, c’est d’avoir un « layer png » qui va correspondre à chaque département, donc 101 layers pour les 101 départements de la France.
Ce sera du boulot de découper un à un, mais on n’a pas le choix et ce sera nécessaire pour avoir un effet hover lors du survol sur chaque département.

3 ème ÉTAPE : LA STRUCTURE HTML

Le HTML sera composé essentiellement de 3 Divs :

  • map-fr : va contenir l’image référant pour notre map d’où l’attribut usemap=”#Map” sur l’image
  • france-normal : va contenir la carte de France entière (l’image png)
  • france-hover : va contenir les layers qui correspondent à chaque département (101 layers)

4 ème ÉTAPE : LA CARTE PROPREMENT DITE

Le point central de notre boulot se focalisera sur la balise <MAP>.
Pour rappel, la balise <MAP> nous servira à définir des zones réactives (les départements) sur une seule image afin d’insérer des liens sur une même surface. Elle permet à partir d’une seule image de proposer un panel de différentes destinations.
Maintenant, on va délimiter chaque département par une zone polygonale à l’aide des coordonnées. Celui-ci prendra pour valeur la liste des abscisses et des ordonnées à l’origine de chacun des points.
Ne vous inquiétez pas, on ne va pas utiliser des fonctions mathématiques, on va utiliser des outils comme Dreamweaver ou Gimp pour récupérer les coordonnées de chaque département.

map

5 ème ÉTAPE : LE CSS

Ayant préalablement découpé les images qui nous servirons en tant que hover, nous allons les positionner en position absolute par rapport à la page, que par défaut sera cacher mais le JavaScript se chargera de les afficher au besoin.

Notant que chaque image représentera un département dans notre cas et qu’on nommera selon le numéro de chaque département.

6 ème ÉTAPE : LE JAVASCRIPT

Pour faciliter notre tâche, on va utiliser jQuery qui va gérer l’événement hover sur chaque Area.
L’attribut « alt » sera l’identifiant que la fonction va passer en paramètre et ainsi afficher le “layer” correspondant à chaque département.

Tutoriel video

2 résponses à “Comment faire une carte des départements français
en html ?”

  1. Kalizo

    Possibilité d’avoir les sources ?

    Répondre

Répondre