Partage
  • Partager sur Facebook
  • Partager sur Twitter

image cliquable zones décalées

Sujet résolu
    19 septembre 2021 à 9:44:46

    Bonjour,

    je mets en place le site du collège où je travaille https://college-laboissiere-vdb.web.ac-grenoble.fr/

    J'ai mis en place une image cliquable sur la page d'accueil qui fonctionne parfaitement sur mon ordinateur mais si j'essaie sur un autre ordi avec un plus petit écran et encore plus sur tablette ou smartphone les zones cliquables sont décalées et ne correspondent plus aux parties où cliquer.

    J'ai créé cette image avec Gimp, j'ai un peu modifié les coordonnées à la main pour que ça colle avec mon ordi.

    Je suis nul en codage alors si quelqu'un se trouve le courage de m'expliquer ce que je peux faire pas à pas, merci

    • Partager sur Facebook
    • Partager sur Twitter
      19 septembre 2021 à 16:27:17

      Bonjour,

      c'est un problème logique :

      l'image voit sa largeur s'adapter selon la largeur de l'écran (plus exactement du viewport), mais les coordonnées des zones cliquables sont toujours les mêmes (exprimées en entiers), donc ces zones se déplacent sur l'image quand sa largeur change...

      il faut soit avoir une largeur d'image fixe, soit indiquer les coordonnées en pourcentage, sauf que l'utilisation de pourcentage n'est pas autorisé

      Il y a pas mal de solutions proposées avec un javascript, mais j'ai troué un truc qui semble pas mal du tout, on abandonne la map, et on met des zones cliquables sous la forme de <a href=""></a>

      https://stackoverflow.com/questions/11363358/is-possible-create-map-html-area-in-percentage

      voir Alternative solution using links

      j'ai testé, avec une image responsive dans la div image, et la div image avec une largeur de 50vh, les zones cliquables restent parfaitement positionnées quand la taille de l'image change

                      <div class="image">
                          <img src="aerienne college_0.png" alt="image" />
                          <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;">111</a>
                          <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;">222</a>
                          <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;">333</a>
                        </div>


      comme tu débutes, on va faire pas à pas



      • Partager sur Facebook
      • Partager sur Twitter
        19 septembre 2021 à 21:26:40

        Bonsoir,

        merci pour l'intéret que tu portes à ma question.

        Dans l'exemple que tu me proposes, ce code remplace totalement ce que j'ai mis précédemment ?

        Je calcule les pourcentages en fonction des valeurs en pixels que j'avais mis auparavant ?

        à quoi correspond la largeur de 50 vh ?

        en fait, le site est construit sur un cms (acadcms) développé par l'académie à partir de Drupal avec guttemberg comme éditeur.

        Je place donc cette image dans un paragraphe que j'ouvre en code source alors je ne sais pas comment intégrer ta solution.

        Merci

        Merci

        • Partager sur Facebook
        • Partager sur Twitter
          20 septembre 2021 à 16:05:04

          Dans l'exemple que tu me proposes, ce code remplace totalement ce que j'ai mis précédemment ?

          oui

          Je calcule les pourcentages en fonction des valeurs en pixels que j'avais mis auparavant ?

          oui exactement

          à quoi correspond la largeur de 50 vh ?

          erreur de frappe, il faut lire vw

          Sur vh et vw : voir par exemple ici : https://developer.mozilla.org/fr/docs/Web/CSS/length

          En fait, ces deux unités de mesure permettre d'indiquer des dimensions en fonction de la largeur ou hauteur de la fenêtre

          50 vw de largeur signifie une largeur égale à la moitié de la fenêtre, cette largeur va donc varier selon la fenêtre

          L'idée est la suivante :

          on crée une div dont la largeur et proportionnelle à l'écran, donc sa largeur est exprimée en vw

          à l'intérieur on va mettre l'image principale qu'on veut responsive, c'est-à-dire remplissant en totalité la div parent

          Pour qu'une image soit responsive, en CSS :

          img {
            width: 100%;
            height: auto;
          }
          

          à ce moment on a une div dont la largeur varie en fonction de la fenêtre ( = viewport), avec à l'intérieur une image qui la remplit complètement, et la hauteur de la div se fait automatiquement en fonction des proportions de l'image.

          La deuxième étape consiste à places des zones cliquables, en l'occurrence des <a href></a> (ancres) qu'on va positionner en absolu dans la div principale, de façon a les placer exactement où on veut avec des valeurs pour top et left exprimées en pourcentage pour être toujours au même endroit de l'image quelque soit da largeur

          De même les dimensions de chaque ancre seront exprimées en pourcentage pour être plus ou moins grandes selon la taille de l'image

          Pour bien comprendre le principe, tu peux t'entraîner sur une page HTML de test avec une image quelconque

          On peut ajouter une couleur de fond aux ancres <a> pour les visualiser, et enlever cette couleur de fond ensuite, ou bien mettre une bordure provisoire pour les repérer facilement

          ne pas oublier de mettre la div principale en position:relative pour utiliser les positions absolues des ancres

          en résumé :

          une div responsive, qui contient une image qui la remplit car rsesponsive, et dans cette div, par dessus-l'image, des ancres cliquables qui ont une largeur et une hauteur en pourcentage et sont positionnées en absolu avec des coordonnés en pourcentage aussi, les pourcentage permettant de tenir compte des dimensions variables de la div parent et de l'image

          • Partager sur Facebook
          • Partager sur Twitter
            20 septembre 2021 à 22:04:53

            J'ai donc commencé mais je ne suis pas trop sûr de ce que j'ai codé

            Voilà ce que j'ai fait, j'ai un gros doute dans la syntaxe de l'img en particulier les {}:

            <div class="img-accueil">
            	<img {src="https://college-laboissiere-vdb.web.ac-grenoble.fr/sites/default/files/Media/image/aerienne%20college_0.png" alt="visite" 
            	width: 100%;
            	height: auto;
            	}
            	<a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/visite-pratique" style=top: 3%; left: 51%; width: 10%; height: 26%;"></a>
            	<a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/le-mot-du-principal" style=top: 17%; left: 63%; width: 11%; height: 10%;"></a>
            	<a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/les-salles-dediees" style=top: 30%; left: 46%; width: 37%; height: 14%;"></a>
            </div>

            Peux-tu me dire ce que tu en penses ?

            Suis-je sur la bonne voie ?

            Merci

            • Partager sur Facebook
            • Partager sur Twitter
              21 septembre 2021 à 10:21:23

              Bonjour,

              les accolades : incorrect

              Très important : toujours séparer le code HTML et le code CSS, dans deux fichiers séparés
              le fichier HTML appelle le fichier de mise en page CSS dans la partie <head></head>

              attention, revoir les fondamentaux

              Ce qui donnera dans le code HTML :

              <div class="img-accueil">
                  <img src="https://college-laboissiere-vdb.web.ac-grenoble.fr/sites/default/files/Media/image/aerienne%20college_0.png" alt="visite">
              
                  <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/visite-pratique" style=top: 3%; left: 51%; width: 10%; height: 26%;"></a>
                  <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/le-mot-du-principal" style=top: 17%; left: 63%; width: 11%; height: 10%;"></a>
                  <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/les-salles-dediees" style=top: 30%; left: 46%; width: 37%; height: 14%;"></a>
              </div>

              et dans le fichier CSS :

                .img-accueil {
                  position: relative;
                  width:50vw;  
                }
                .img-accueil img{
                  width: 100%;
                  height: auto;
                }
                .img-accueil a{
                  display: block;      
                  position: absolute;
                }

              Qu'en dis-tu ?

              J'ai mis une largeur de 50 vw mais on changera cette valeur en fonction de la mise en page générale, le principe est d'avoir une div dont la largeur est proportionnelle à la fenêtre (viewport)

              Attention: ne pas oublier dans la partie <head></head>:

              <meta name="viewport" content="width=device-width, initial-scale=1.0">

              Infos : https://developer.mozilla.org/fr/docs/Web/HTML/Viewport_meta_tag



              -
              Edité par ChrisLebure 21 septembre 2021 à 10:22:02

              • Partager sur Facebook
              • Partager sur Twitter
                21 septembre 2021 à 16:18:35

                Oui, je savais que le CSS devait être séparé mais comme je n'avais pas trouvé de lieu d'intervention sur le css dans le cms, j'avais tenté ma chance dans le html ⊙﹏⊙ Bon, j'ai fini par trouver.

                Si je comprends bien dans le css,

                le premier point donne les caractéristiques de la div ( position et largeur dans la page)

                le deuxième, les caractéristique de l'image dans la div

                et le troisième, les caractéristiques des liens dans la div

                C'est bien ça ?

                Au fait, il faut commencer les commandes css par un point ?

                Pour ce qui est de la largeur, je vais devoir faire des essais car le cms a une façon un peu spéciale de gérer la page :

                J'ai du créer des colonnes dans lesquelles je place des images ou des "paragraphes",... et cette image doit aller dans la colonne du milieu où j'ai créé un paragraphe et j'interviens (pour le html) sur le code source du paragraphe.

                Par contre pour ce que tu dis qu'il faut mettre entre le <head> et le </head> , j'ai vu dans le code source de la page ceci :

                <meta name="viewport" content="width=device-width, initial-scale=1" />

                c'est bon, il n'y a rien à ajouter non ?

                un dernier petit truc : c'est quoi les 111 ou 222 ou 333 que tu avais mis dans ton premier exemple ?

                Bref, je vais essayer ce que tu m'as envoyé.

                Merci beaucoup

                -
                Edité par JcP7 21 septembre 2021 à 16:41:30

                • Partager sur Facebook
                • Partager sur Twitter
                  22 septembre 2021 à 22:24:17

                  Bon ben j'ai essayé sur le site ( https://college-laboissiere-vdb.web.ac-grenoble.fr/ )

                  l'image s'affiche bien mais aucun lien dessus :-(

                  Je me demande si ce n'est pas la structure du cms qui empêche ce type de codage .

                  Qu'en penses tu ?

                  En fait, en ouvrant le code source après enregistrement, j'ai vu qu'il y a des modifications qui se sont faites toutes seules.

                  Le code est changé en :

                   <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/visite-pratique" style="top:" 3%;="" left:="" 51%;="" width:="" 10%;="" height:="" 26%;"=""></a>
                      <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/le-mot-du-principal" style="top:" 17%;="" left:="" 63%;="" width:="" 11%;="" height:="" 10%;"=""></a>
                      <a href="https://college-laboissiere-vdb.web.ac-grenoble.fr/visite-virtuelle/les-salles-dediees" style="top:" 30%;="" left:="" 46%;="" width:="" 37%;="" height:="" 14%;"=""></a>
                  </div>

                  et même après correction, l'enregistrement refait les mêmes modifs...

                  As-tu une idée du pourquoi ?

                  Merci


                  -
                  Edité par JcP7 22 septembre 2021 à 22:35:01

                  • Partager sur Facebook
                  • Partager sur Twitter
                    23 septembre 2021 à 6:52:51

                    Bonjour,

                    regarde ce site , on peux créé des liens cliquables en fonction des images :

                    https://www.html-map.com/

                    voir après ci cela fonctionne avec une tablette ou smartphone.

                    le site est super bien.

                    -
                    Edité par Mickael_CR 23 septembre 2021 à 6:54:06

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pour apprendre on commence on fait des erreurs et après on s'améliore🤫

                      23 septembre 2021 à 22:34:17

                      ça y est, ça marche !!!

                      en fait, il manquait juste un " après le style=

                      C'est corrigé et les liens fonctionnent.

                      Merci à tous pour vos conseils, en particulier à ChrisLebure

                      • Partager sur Facebook
                      • Partager sur Twitter

                      image cliquable zones décalées

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      • Editeur
                      • Markdown