Plus d’infos sur ce tutoriel : https://grafikart.fr/tutoriels/javascript/carte-interactive-791
Abonnez-vous à Grafikart : http://bit.ly/19nGK3G
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.
Abonnez-vous à Grafikart : http://bit.ly/19nGK3G
Retrouvez un concentré du web autour du monde du développement web et du graphisme…
Formez vous et améliorez vos compétences à travers près de 161 heures de formation vidéo…
Plus de tutoriels : https://www.grafikart.fr
Original source
22 responses to “Tutoriel Javascript : Carte interactive en SVG”
Bonjour,
j'ai bien suivit le tuto à la lettre, mais je ne comprend pas pourquoi une fois que ma souris est passé sur les régions, celle-ci reste grises. Vous dès le début, vous retiré la souris de la région et elle reprend sont état actuelle.
Auriez vous une solution ?
Mon CSS:
.map{
overflow: hidden;
}
.map__image{
width: 50%;
float: left;
}
.map__image path{
fill: #e5e3df;
stroke: #FFF;
stroke-width: 1px;
transition: fill 0.3s;
}
.map__image .is-active path{
fill: #b8b7bb;
}
.map__list{
float: right;
width : 50%;
}
.map__list a{
color: inherit;
text-decoration: none;
transition: color 0.3s;
}
.map__list a.is-active{
color: #b8b7bb;
font-weight:bold;
text-decoration: underline;
}
Très bien. Y a t-il quelque chose de particulier à faire pour que cela fonctionne sous Safari ?
super intéressant, est-ce possible de récupérer tes fichiers ?
car j'aimerais faire une carte interactive aussi, mais pas avec la carte de France.
Merci.
awsoooooome tutorial, thx man 😉
I JUST FCKINNNN LOVE UUUUU U ARE MY HERO <3 <3 <3 <3 <3 <3
intéressant, est ce je pourrais customiser la carte en ajoutant mes icones dans chaque région, définir les zoom.
Voila le svg ;D
what it s the name of the program ? Photoshop?
Mercie beaucoup!! muy bien explicado 🙂 Muchas gracias
спасибо классный туториал =)
но хотелось бы чтобы вы оставляли ссылки на ресурсы которые вы заходите и на конечный результат
прошу прошения за перевод (Google)
Merci tutoriel frais =)
mais je voudrais vous laisser des liens vers des ressources auxquelles vous accédez et le résultat final
Je suis désolé pour la traduction (Google)
Exactement ce qu'il me fallait !
Salut, j'en profite pour te dire merci pour tous tes tutos que tu fais, ils sont super clairs et en plus très utiles. Je vais essayer de faire celui-ci avec un système de carte mondiale, qui lorsque tu passes ta souris sur un pays, affiche une infobulle.
#Grafikart.fr Pouvez vous faire une mise a jour du tutoriel du l'agenda SVP avec des Evénements tirer de 2 tableaux si possible
Merci
Vous utilisez quoi comme IDE ? et merci.
bon tuto
Merci super tuto ! C'est vraiment impressionnant la vitesse et la façon dont tu codes avec les raccourcis claviers etc^^
Je connaissais même pas la fonction debugger pour mettre un point d'arrêt, c'est cool! Merci 🙂
Intellij IDEA n'a pas un support pour les prefix ? Quand je suis sur PHPStorm, simplement le fait d'écrire transition, bah ça me propose directement tous les prefix, et ça les met tous seuls.
Et aussi, on est passé à la version 2016.2 pour idea et storm ^^ (flemme de tester sur idea)
J'arrive toujours pas à m'y faire à cette nouvelle carte 🙁
Super ! J'allais justement comment à me renseigner sur la question 😀
vraiment super un grand merci a vous pour tous ces efforts
tu utilise bing ???!