Dans ce tutoriel nous allons voir une nouvelle méthode pour créer une carte interactive en HTML / CSS et JavaScript. Le principe est d'utiliser un SVG pour dessiner la carte et détecter les zones sélectionnables.
L'ancienne méthode
Pour créer le même effet précédemment on utilisait une image avec une <map> pour détecter la région sélectionné. Cette méthode posait plusieurs problèmes :
- Il faut créer une image par région sélectionnée
- Il faut dessiner la zone par dessus l'image
- L'image n'est pas facilement redimensionnable
Le SVG
Le SVG permet de solutionner les problèmes précédent. En effet, il est possible de coller le code de l'image dans l'HTML pour ensuite sélectionner les zones en CSS ou JS. Il est ainsi important de concevoir le SVG d'une certaines manière afin de se faciliter la vie par la suite :
- Il faut créer une forme par région
- Bien nommer les formes (ces noms seront utilisés comme ID)
