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" :











Schulungssuche
Hier können sie nach 
Titel,
LMS Code oder Schlagwörtern suchen 




Colleges
Colleges sind bestimmte 
Lehrangebote für 
veschiedene Funktionen und 
Bereiche




Schulungsplan
Der Schulungsplan 
beinhaltet alle Schulungen,
zu denen Sie bereits angemeldet sind, die 
Sie
sich selbst zugewiesen haben, die Ihr Vorgesetzter
ihnen 
zugewiesen hat oder Compliance Schulungen.
Compliance Schulungen müssen bearbeitet werden !
Sie 
haben ein Fälligkeitsdatum. Überschreiten Sie
dieses Fälligkeitsdatum, so 
wird automatisch ihr
Vorgesetzer informiert!
-> Fragen zu Compliance Schulungen? Box anklicken





Absolvierte Schulungen
Die Lernhistorie 
zeigt alle, in den letzten 30
Tagen absolvierten Schulungen an.



 Häufig 
gestellte Fragen
 Box anklicken, um zum FAQ weitergeleitet zu werden
 




 Optionen
BeschreibungLink

Sorry if this looks really messy.

Thanks for any help in advance !

Roysh · Accepted Answer

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: none
Add css for hover state so that the tooltip div will be set to display:block

Your HTML should look like


  
    
     I'm a tooltip!
    
  
    
    
     I'm another tooltip!

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).

Image map with different overlays/tooltips

Answers (2)

Related Questions