Bonjour,

Je suis sur un projet où je dois au survol d'une zone d'une image que ça m'affiche une mini popup avec du texte. Pour cela j'ai un fond qui prend tout l'écran et je place mes images à différents endroits sur ce fond.

Pour les zones , j'utilise map et area. J'aimerais avoir du responsive design sur la page du site donc j'utilise rwdImageMaps pour gérer la taille des zones suivants la taille de l'écran. J'aimerais voir le contour de mes zones donc j'ai essayé d'utiliser maphilight sauf que dès que je l'utilise le contour de mes zones sont décalé par rapport à là où elle devrait être et de plus l'image mappé  n'est plus en responsive.

Est-ce quelqu'un a une solution ?

Voila mon image:

Voila mon code:

html

<div class="container">

        <map  name="primary">
            <area shape="poly" coords="769,170,772,180,766,194,745,216,719,237,705,255,703,271,692,273,675,281,663,292,655,306,646,309,647,320,638,320,635,323,627,323,621,335,611,339,612,351,605,349,597,355,594,363,587,363,583,366,583,375,577,374,564,381,556,382,543,372,550,361,567,347,580,330,589,320,602,298,618,272,638,247,651,234,667,222,675,203,769,170" class="popable mout"  data-text="Nageoires pectorales" data-info="Nageoires pectorales très longues (environ 5mètres) <br> Origine du nom: Megaptera carmegaptère = à grandes ailes">
            
            <area shape="poly" coords="211,257,208,291,199,289,176,308,151,337,146,341,129,349,105,376,91,397,93,382,105,353,115,345,119,337,132,326,158,297,169,287,211,257" class="popable  mout"  data-text="Nageoire caudale" data-info="Nageoire caudale avec une profonde encoche médiane <br> et un bord de fuite irrégulier">
            
            <area shape="poly" coords="794,60,831,45,850,42,899,41,926,39,945,45,953,50,956,59,950,67,910,78,863,91,825,104,794,61,794,61,795,60,806,55,794,63,795,61,794,60" class="popable mout"  data-text="Tubercules" data-info="Tubercules et leur propriété hydrodynamique <br> Bio mimétisme utilisé pour les éoliennes par exemple">
            
            <area shape="poly" coords="832,109,824,158,793,180,796,184,829,165,854,146,883,124,919,100,933,81,903,83,862,98,832,110,832,109" class="popable mout"  data-text="Sillons ventraux" data-info="Sillons ventraux permettant un déploiement <br> de la gueule pendant l’alimentation">
             
        </map>

        <div class="bal">
            <img class=map  usemap="#primary" src="../images/baleine_bosse.png" alt="350 x 150 pic">
        </div>
</div>

 CSS:

html{
  margin: 0;
  padding: 0;
  background: url(../im/fond.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}


img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: block;
}

.container{
  /*border: 2px solid black;*/
 
  position: absolute;
  /*border: 2px solid red;*/
  width: 99%;
  height:99%;


}

.bal{
    /*border: 2px solid black;*/
    position: absolute;
    top: 48%;
    left:16%;
    width: 60%;
    height: 50%;
}

jQuery

$(function() {
        
        
        
        $('img[usemap]').rwdImageMaps();
        $('img[usemap]').maphilight();
        
    
});

Cordialement

-
Edité par Morak974 5 mai 2018 à 16:18:18