Image map with different overlays/tooltips
Question
So I am relatively new to coding in general and I thought I could ask here for some help.
I have created an image map for a picture. Different sections should show a different overlay or speechbubble tooltip with a fixed position next to the hovered area (with text) and clickable links. But I have no idea on how to do this properly.
Basically, an interactive instruction.
My first tries were somewhat promising (for me) in an editor, but failed in the "field test" :
<!DOCTYPE html>
<html>
<body>
<img src="PICTURE LINK"
width="850" height="600" alt="MitarbeiterAnsicht" usemap="#map1">
<map name="map1">
<div class="tooltip">
<area shape="rect" coords="20, 195, 150, 220" alt="Schulungssuche" >
<span class="tooltiptext"><b>Schulungssuche</b><br>Hier können sie nach
Titel,<br>LMS Code oder Schlagwörtern suchen </span>
</div>
<div class="tooltip">
<area shape="rect" coords="13, 310, 187, 500" alt="Colleges" >
<span class="tooltiptext"><b>Colleges</b><br>Colleges sind bestimmte
Lehrangebote für <br>veschiedene Funktionen und <br>Bereiche</span>
</div>
<div class="tooltip">
<area shape="rect" coords="190, 158, 557, 550" alt="Schulungsplan"
href="LINK">
<span class="tooltiptext"><b>Schulungsplan</b><br>Der Schulungsplan
beinhaltet alle Schulungen,<br>zu denen Sie bereits angemeldet sind, die
Sie<br>sich selbst zugewiesen haben, die Ihr Vorgesetzter<br>ihnen
zugewiesen hat oder Compliance Schulungen.<br><font
color="#FF0000">Compliance Schulungen müssen bearbeitet werden !<br>Sie
haben ein Fälligkeitsdatum. Überschreiten Sie<br>dieses Fälligkeitsdatum, so
wird automatisch ihr<br>Vorgesetzer informiert!</font><br><font
color="0000ff">-> Fragen zu Compliance Schulungen? Box anklicken</font>
</span>
</div>
<div class="tooltip">
<area shape="rect" coords="565, 158, 740, 347" alt="Absolviert" >
<span class="tooltiptext"><b>Absolvierte Schulungen</b><br>Die Lernhistorie
zeigt alle, in den letzten 30<br>Tagen absolvierten Schulungen an.</span>
</div>
<div class="tooltip">
<area shape="rect" coords="565, 453, 647, 470" alt="FAQ"> <b>Häufig
gestellte Fragen</b><br><font
color="0000ff"> Box anklicken, um zum FAQ weitergeleitet zu werden</font>
</span>
</div>
<div class="tooltip">
<area shape="rect" coords="565, 485, 647, 505" alt="Optionen" href="LINK" >
<span class="tooltiptext"> <b>Optionen</b><br>Beschreibung<font
color="0000ff">Link</font></span>
</div>
</map>
<style>
.tooltip {
position: absolute;
display: inline-block;
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 3px;
padding: 5px 5px;
border: 1px dotted black;
position: relative;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</body>
</html>
Sorry if this looks really messy.
Thanks for any help in advance !
2 answers
solution1
3 ACCPTED 2017-08-18 16:34:44
Ok, here's my approach:
I would avoid using img and map tags. If the areas you need on the image are only rectangles, I do believe it's the best approach.
Here's what you need to do:
Create a container div and set its background to your image. You can also set the height and the width according to your image size. Set this div to be position relative or absolute .
Create children divs according to the hover areas you want to have. Set these div with position absolute and give them width and height according to the area you want to hover on.
Inside each children div create another div in which you'll enter the tooltip text. Set this div to be
display: noneAdd css for hover state so that the tooltip div will be set to
display:block
Your HTML should look like
<div class="main-img">
<div class="invisible-area area-one">
<div class="tooltip">
I'm a tooltip!
</div>
</div>
<div class="invisible-area area-two">
<div class="tooltip">
I'm another tooltip!
</div>
</div>
</div>
and CSS
.main-img {
height: 500px;
width: 500px;
position: relative;
background: url('your image URL here') no-repeat center;
}
.invisible-area {
position: absolute;
height: 100px;
width: 100px;
}
.area-one{
top: 135px; //set here the position of the area
left: 90px;
}
.area-two {
top: 135px; //other area position
left: 275px;
}
.tooltip {
display: none;
/*optional tooltip design*/
background: white;
border-radius: 5px;
border: 1px black solid;
}
.invisible-area:hover .tooltip {
display: block;
}
Here's a fiddle - hover over the head of the characters in the image
EDIT
Here's another fiddle which includes the image you've uploaded. You should add more invisible-area divs along with their tooltip. All you need to do is to give them the exact width and height and position (top, left).
solution2
1 2017-08-17 09:57:19
.tooltip { position: relative; } .tooltiptext { position: absolute; outline: none; width: 300px; background-color: #e86d6d; color: black; border-radius: 5px; box-shadow: 5px 5px 8px rgba(55, 55, 55, .65); z-index: 10; word-break: break-word; padding: 10px; opacity: 0; -webkit-transition-delay: 3s; -webkit-transition: opacity 2s; /*-moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s;*/ transition-delay: 3s; transition: opacity 2s; //visibility:hidden; } .tooltip:hover .tooltiptext { opacity: 1; visibility: visible; } .tooltip:hover .tooltiptext { opacity: 1; -webkit-transition: opacity .8s; transition: opacity .8s; } .tooltip .tooltiptext:hover { opacity: 1; -webkit-transition: opacity .8s; transition: opacity .8s; }
<body> <img src="http://www.georgemaps.com/wp-content/uploads/2016/06/vintage-world-map-high-resolution-old-global-hd-desktop-wallpaper-widescreen-definition-x-1.jpg" width="450" height="400" alt="MitarbeiterAnsicht" usemap="#map1"> <map name="map1"> <div class="tooltip"> <area id="meow" shape="rect" coords="20, 195, 150, 220" alt="Schulungssuche" href="http://www.stackoverflow.com" > <span class="tooltiptext"><b>Schulungssuche</b><br>Hier können sie nach Titel,<br>LMS Code oder Schlagwörtern suchen <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> <div class="tooltip"> <area shape="rect" coords="13, 310, 287, 300" alt="Colleges" href="http://www.stackoverflow.com"> <span class="tooltiptext"><b>Colleges</b><br>Colleges sind bestimmte Lehrangebote für <br>veschiedene Funktionen und <br>Bereiche <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> <div class="tooltip"> <area shape="rect" coords="290, 158, 257, 50" alt="Schulungsplan" href="http://www.stackoverflow.com"> <span class="tooltiptext"><b>Schulungsplan</b><br>Der Schulungsplan beinhaltet alle Schulungen,<br>zu denen Sie bereits angemeldet sind, die Sie<br>sich selbst zugewiesen haben, die Ihr Vorgesetzter<br>ihnen zugewiesen hat oder Compliance Schulungen.<br><font color="#FF0000">Compliance Schulungen müssen bearbeitet werden !<br>Sie haben ein Fälligkeitsdatum. Überschreiten Sie<br>dieses Fälligkeitsdatum, so wird automatisch ihr<br>Vorgesetzer informiert!</font><br><font color="0000ff">-> Fragen zu Compliance Schulungen? Box anklicken</font> <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> </map> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.