28172 sujets

CSS et mise en forme, CSS3

Tooltip Css sur aera map

Bonjour,
J'ai une image (relativement grande) sur laquelle j'ai défini plusieurs aera map. Mon souhait est d'intégrer un tooltip sur chaque aera map, si possible en CSS. Il est vrai que je peux utiliser l'attribut 'title' de l'aera map pour laisser faire le navigateur, le problème est que le tooltip généré par le navigateur n'est pas assez contraster au vue de mon image.
J'ai fait quelques recherches mais je n'ai trouver que des tooltip sur des '<a href...'
Quelqu'un a une idée...
Merci.
Jean-François
Modérateur
Bonjour,

Via CSS, il n'y a guère qu'avec chrome/edge(-webkit-) tu peut espérer faire un tooltip sur un <area> en modifiant le display de <map> et <area>, puis en jouant avec le positionnement ... exemple a voir sous chrome et FF : https://codepen.io/gcyrillus/pen/AJHmt (accessoirement responsive via transform). texte ajouter via area:before{content:attr(title)} .

Le plus simple est peut-être d'utilisé une grille avec l'image sur l'ensemble de la grille et des liens dispatché dans la grille dans leur cellules respective pour générer les tooltips.

Un exemple de ce que tu as comme img/map/area , permettrais de te répondre plus précisément.

Cdt
Merci pour ta réponse.
En cherchant un peu plus j'ai trouvé ce code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
    <style>
        #map {
 margin:0;
 padding:0;
 width:400px;
 height:250px;
 background:url(map.jpg) top left no-repeat #fff;
 font-family:arial, helvetica, sans-serif;
 font-size:10pt;
}
        
        #map li {
    margin: 0;
    padding: 0;
    list-style: none;
}
        #map li a {
 position:absolute;
 display:block;
 /*
    Specifying a background image
    (a 1px by 1px transparent gif)
    fixes a bug in older versions of
    IE that causeses the block to not
    render at its full dimensions.
 */
    background:url(blank.gif);
    text-decoration:none;
 color:#FFFFFF;
}
 
        #map li a span { display:none; }
        
        
        #map li a:hover span {
   position:relative;
   display:block;
   width:200px;
   left:20px;
   top:20px;
   border:1px solid #000;
   background:#000;
   padding:5px;
    filter:alpha(opacity=100);
   opacity:1;
    }
       
        #map a.bunny {
    top: 20px;
    left: 60px;
    width: 80px;
    height: 90px;
}
 
#map a.parrot {
 top:1px;
 left:275px;
 width:50px;
 height:50px;
}
 
#map a.snail {
 top:135px;
 left:30px;
 width:50px;
 height:50px;
}
 
#map a.dog {
 top:100px;
 left:150px;
 width:115px;
 height:95px;
}
 
#map a.cat {
 top:65px;
 left:315px;
 width:70px;
 height:120px;
}
  
    </style>
</head>

<body>
    <ul id="map">
 <li><a class="bunny" href="#" title="Bunny"><span><b>Bunny Rabbit</b><br>
  Cute and fuzzy, with long ears and a fluffy tail. this cuddly bunny
  makes a great pet.</span></a></li>
 
 <li><a class="parrot" href="#" title="Parrot"><span><b>Parrot</b><br>
  With a lifespan of up to 40 years, these bright, colorful birds
  are wonderful life-long pets. One of only a few birds
  capable of learning to speak, parrots are intelilgent and
  highly social animals.</span></a></li>
   
 <li><a class="snail" href="#" title="Snail"><span><b>Snail</b><br>
  Snails are a wonderful addition to any aquarium-- just make
  sure that its tank-mates aren't going to eat it! Snails say
  "Meow."</span></a></li>
   
 <li><a class="dog" href="#" title="Dog"><span><b>Dog</b><br>
  Man's best friend, a protector and commrade of humans for
  centuries, dogs are faithful, loyal and loving companions.
  </span></a></li>
   
 <li><a class="cat" href="#" title="Cat"><span><b>Cat</b><br>
  Another popular pet, these felines were once viewd as a
  sacred creature amont the ancient Egyptians. Independant,
  sociable, and with a rumbling purr, cats make wonderful
  pets.</span></a></li>
</ul>

</body>
</html>

Dans cet exemple, l'image est positionnée en haut à gauche, je suis en train de chercher pour la mettre au centre de l'écran (margin-left:auto; margin-right:auto;). Je joins une image pour illustration.
upload/1610036030-23311-map.jpg
Merci
Modifié par luxojr (07 Jan 2021 - 17:16)
Modérateur
bonsoir,

avec le positionement absolu, les coordonnées prennent comme réference le plus proche parent positioné (relative/absolute/fixed/sticky).

Par défaut ton ul est en position : static; , alors les enfants en absolute vont se caler leur coordonnées à partir de la fenêtre (html) n'ayant aucun autre parent positionné . Pour que les coordonnées soient calculé a partir de #map, il faut faire un reset sur position.

exemple (+ margin:auto):
#map {
  margin: auto;
  position: relative;
  padding: 0;
  width: 400px;
  height: 250px;
  background: url(map.jpg)
    top left no-repeat #fff;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}
Modérateur
Bonjour,
Si c'est réellement ton image, alors tu peux plus facilement gérer en vectoriel en utilisant SVG. Tu auras largement plus facile pour intégrer tes tooltips Smiley smile
Bonjour, ce n'est pas mon image; 'est juste l'image de l'exemple que j'ai trouvé sur le web. L'image réelle est beaucoup plus détaillée et plus grande (un jpeg). Smiley cligne
Sujet clos
Aller à