Accueil » Tutoriels » JavaScript » Tutoriel Javascript : Carte interactive en SVG

Tutoriel Javascript : Carte interactive en SVG

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)

À propos Amine MAGDICH

Animé par l'envie d'entreprendre, je déborde de curiosité pour le numérique et les nouvelles technologies. Sans cesse à la recherche de savoir, je pousse ma capacité d'apprentissage à son maximum, afin d'obtenir des compétences globales, répondant aux enjeux de la gestion humaine et technique d'un projet multimédia.

Un commentaire

  1. That’s the peefcrt insight in a thread like this.

Laisser une réponse

x

Check Also

Compilation Python | Création de site internet

PYTHON TD N°4

Un entier naturel (écrit en base 1010) est un palindrome s’il se lit à l’identique ...

Compilation Python | Création de site internet

PYTHON TD N°3

Soit NN dans NN, avec N≥2N≥2. Écrire une fonction donnant le plus grand facteur premier ...