D4mations.com

Tutoriel Javascript : Carte interactive en SVG



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

d4mer

,

22 responses to “Tutoriel Javascript : Carte interactive en SVG”

  1. 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;

    }

  10. спасибо классный туториал =)
    но хотелось бы чтобы вы оставляли ссылки на ресурсы которые вы заходите и на конечный результат
    прошу прошения за перевод (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)

  12. 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.

  18. 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)

Leave a Reply