28172 sujets

CSS et mise en forme, CSS3

[Résolu] Zone cliquable sur image responsive

Bonjour,

J'ai une image avec un point précis que j'ai rendu cliquable 
<div style="position:absolute;top:10%; width:10%; height:10%; z-index:1; ">
. Toutefois quand je réduis la taille d'affichage de l'image, le point cliquable ne se trouve plus au même endroit sur la photo (malgré le fait que j'ai mis des %).

Savez-vous comment je peux régler ce pb? (qu'un endroit cliquable d'une image soit toujours au même endroit même quand on réduit la taille de cette image)

Merci,

Soriro
Bonsoir,
Habituellement pour réaliser une zone d'image cliquable, on utilise un élément map est des éléments area comme ceci :
<map id="carte">
  <area shape="rect" coords="100,100 200,200" href="..." >
</map>
<img usemap="#carte" src="..." alt="..." width="1000" height="1000">

Les éléments img et map sont alors parfaitement superposés en toutes circonstances.
En HTML5, on ne peut cependant plus utiliser des pourcentages pour les coordonnées. Il faut donc les calculer au préalable ou avec JavaScript.
Modifié par TrisTOON (23 Mar 2017 - 21:01)
Merci de cette réponse.

Je viens d'essayer le script mais cela ne fonctionne pas: quand je réduis la taille de la fenêtre (et donc de l'image), la zone cliquable garde la même taille. Donc la zone cliquable déborde de la zone prévue.
Ai-je raté qq chose?

Je n'ai pas compris: "Il faut donc les calculer au préalable ou avec JavaScript. "
Modérateur
Si tu te base sur une image map , pour la redimensionnée ainsi que ses zones cliquable, il te faut en passer par transform:scale(); et compenser ses dimensions avec des marges positives(grossie) ou négatives(reduite) car transform n'a q'un effet visuel. L'élement conserves sa taille et son emplacement dans le flux du document, il est simplement redessiné.

Javascript peut-être utilisé pour déterminé la valeur de scale() et des marges, ou bien des mediaquerie pour quelques valeurs predéfinies. (plutôt bricolo comme méthode edit un exemple avec mediaqueries https://codepen.io/gcyrillus/pen/AJHmt je ne conseille pas mais devrait avoir le merite de montré comment cela fonctionne ).

Si les elements cliquables ont des formes rectangulaires, alors des liens en absolute + pourcentage dans un element en relatif est tout a fait adapté.
Modifié par gcyrillus (23 Mar 2017 - 22:02)
Merci.
Je crois comprendre que la seule façon de déterminer la valeur de scale() est un peu compliqué (sans compter qu'il y a aussi les marges à traiter).

Mais comme les formes cliquables sont rectangulaires, peux-tu m'expliquer " liens en absolute + pourcentage dans un element en relatif " : est-ce ce que j'ai tenté de faire (mais pas totalement satisfaisant) ?
Bonsoir SORIRO

Ce que veux dire tristoon c'est qu'il faut faire quelque chose dans ce genre là :


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    </head>
    <body>
        <img id="photo" usemap="#carte" src="images/mon_image.jpg" width="640" height="480">
        <map name="carte">
            <area id='area1' shape="rect" coords="100,100,200,200" href="index.php">
        </map>
        ratio x=<input id="rat_x" type='text'/>
        ratio y=<input id="rat_y" type='text'/>

    <script>
        //Mémorisation de la taille initiale de la photo pour calculer le ratio
        var image_width=$("#photo").width();    
        var image_height=$("#photo").height();  
        //Positionnement de zone interactive
        var area1={ "x0":100, "y0":100, "x1":200, "y1": 200 };
        $("#area1").attr("coords", area1.x0+","+area1.y0+","+area1.x1+","+area1.y1);
        
        //Avec jquery resizable la photo devient redimenssionnable
        $("#photo").resizable( {
            //Dans l'évènement resize on récupére la nouvelle taille de l'image
            //à chaque changement et on calcul de ratio horizontal et vertical de redimentionnement
            // et on l'applique sur les coordonnées de la zone interactive
            resize: function( event, ui ) {
                    var rat_x=ui.size.width/image_width;
                    var rat_y=ui.size.height/image_height;
                    $("#rat_x").val(rat_x);
                    $("#rat_y").val(rat_y);
                    $("#area1").attr("coords", area1.x0*rat_x+","+area1.y0*rat_y+","+area1.x1*rat_x+","+area1.y1*rat_y);
                }
            });
    </script>

    </body>
</html>


Je débute en "map" et "area" mais je pense qu'il y a des scripts à linker qui font cela très bien automatiquement... je regarde...

Bonne soirée
Modérateur
voici un exemple :
<nav>
  <img src="http://lorempixel.com/600/100/city/4" />
  <a href="#">lien</a>
</nav>


nav {
  position: relative;
}

img {
  width: 100%;/* s'adapteras à la largeur du conteneur */
}

a {
/* color:transparent;*/
  position: absolute;
  border: solid;
  top: 45%;
  left: 44%;
  width: 5%;
  height: 20%;
}


http://codepen.io/gc-nomade/pen/wJXGWp
Modifié par gcyrillus (23 Mar 2017 - 23:17)
Merci

gcyrillus: merci beaucoup car non seulement tu m'as donné la solution sur un plateau, mais en plus tu as devancé ma question suivante (comment insérer un texte dans la zone cliquable)
GJbola: merci car tu m'as apporté une solution que j'aurai dû trouver seul, sauf que je ne suis pas assez bon en anglais...

Bonne continuation
Bonjour ,

Je me permets de reposter une question au sujet du script qu'a gentillement rédigé gcyrillus ( http://codepen.io/gc-nomade/pen/wJXGWp ).
J'aurai besoin d'une idée: si j'ajoute du texte alors le cadre hyperlien se décale vers le bas d'autant 

<nav>
  <img src="http://lorempixel.com/600/100/city/4" />
  <a href="#"> lien </a>
  Texte
</nav>

Comment peut-on éviter ce décalage?

Merci
Modifié par soriro (14 Jan 2018 - 20:56)
Bonjour à tous,

est-ce que quelqu'un connaît une fonctionnalité similaire aux <area><map> qui ne soit pas filtrée par les fournisseurs d'e-mail ?

C'est en effet le cas pour l'application mobile GMAIL, par exemple.
Bonjour Gcyrillus,

Comme mon pseudo l'indique, je fais des sites sur dreamweaver mais le code c'est compliqué pour moi.

Je rencontre un autre problème: j'ai très bien réussi à mettre une zone cliquable mais je n'arrive pas à en mettre une deuxième, puis une troisième, ... J'ai bien essayé de transformer le CSS mais mes connaissances sont trop mauvaises.

Pourrais-tu m'aider à compléter ton HTML ou CSS du 23 Mar 2017 à 23:17 ?

Merci pour ton aide précieuse,
Ryan
Modérateur
gcyrillus a écrit :
voici un exemple :
<nav>
  <img src="http://lorempixel.com/600/100/city/4" />
  <a href="#>lien</a>
</nav>


nav {
  position: relative;
}

img {
  width: 100%;/* s'adapteras à la largeur du conteneur */
}

a {
/* color:transparent;*/
  position: absolute;
  border: solid;
  top: 45%;
  left: 44%;
  width: 5%;
  height: 20%;
}


http://codepen.io/gc-nomade/pen/wJXGWp


Cela fonctionne pour un lien unique, pour plusieurs liens, il te faut les ciblés individuellement. Tu peut leur attribué un ID.

<nav>
  <img src="http://lorempixel.com/600/100/city/4" />
  <a href="#"  id="a1" >lien</a>
  <a href="#"  id="a2" >lien</a>
  <a href="#"  id="a3" >lien</a>
</nav>


nav {
  position: relative;
}

img {
  width: 100%;/* s'adapteras à la largeur du conteneur */
}

a {
  position: absolute;
}
#a1 {/* code pour celui ci uniquement */}
#a2 {/* code pour celui ci uniquement */}
#a3 {/* code pour celui ci uniquement */}


Si cela ne t'aide pas plus, crées un nouveau sujet pour préserver celui-ci et donner une meilleure visibilité au tien.
Cdt
Modifié par gcyrillus (26 Feb 2020 - 18:50)
Sujet clos
Aller à