Dans cette deuxième étape, nous allons ajouter une bulle d'information à notre carte SVG .
Lors de l'étape précédente nous avons crée le fond de carte interactif avec des liens vers différentes page selon les régions. Nous utiliserons ce même fond SVG pour la carte et Css pour le survol.
Réduisez la largeur de la fenêtre de votre navigateur pour tester l'effet responsive
Survolez la carte et cliquez sur la région de votre choix
Par défaut, les dimensions de cette carte sont définies par une balise DIV. Vous pouvez donc controler la dimensions par défaut, par exemple : max-width: 650 px;
Effet de survol de la carte
L'effet de survol de la carte est assuré par le style CSS qui indique aux différentes 'path' (les tracés de la carte SVG) comment se comporter au survol de la souris [ path:hover ... ]
Mise en page de la carte
L'intégration de la carte sur la page est directement en SVG sans passer par une librairie de type Raphael-Js
Zones interactives et cliquables (path)
Les zones réactives de la carte sont des paths SVG classiques encadrés par des liens a href pour diriger vers une autre page lors du clic.
A la première ligne ci-dessus, nous trouvons la balise 'a href' qui va 'encadrer' le path afin que celui-ci soit considérer comme un lien hypertexte standard. Notez que pour le SVG, il faut ajouter 'xlink:href' pour une interprétation correcte.
A l'intérieur de ce lien, vous pouvez appeler une nouvelle page, un script Javascript ou Ajax, ou une adresse e-mail, le téléchargement d'un document... bref comme un lien normal.
Ensuite, ligne 2, nous plaçons le PATH. C'est le PATH qui dessine chaque région de la carte. En SVG, pour dessiner une forme libre, chaque path commence toujours par 'M', (Moveto), et ce finit par 'Z', (closepath). :)
Inutile de chercher à dessiner vous-même les PATH, notre site cmap.comersis.com propose des cartes SVG gratuites où les path sont prêts à être copier/coller.
Retrouvez nos cartes interactives sur cmap.comersis.com