Imagemap; show text when hovering over certain area

Question

logocopy3 Im having issues linking a specific part of an image (area map) with the hover effect. Currently I have the ability to click each section of the imagemap and it directs me to the required page, however I would like the hover effect to be displayed before the user clicks so they know which page they are navigating to. Basically Im trying to display a text which stays in the same position sitting above the image map each time the user hovers over a specific area.

My code is as follows:

 <div>     
<img src="logocopy3.png" id="logo" style="width: 260px; max-width: 100%;    
height: auto;" alt="" usemap="#map" />

<map name="map">
    <area shape="circle" coords="243,132,41" href="Ktrack.html" alt=''/>
    <area shape="circle" coords="189,223,41" alt='' href="Kinsurance.html" />
    <area shape="circle" coords="69,205,29" alt='' href='Khealth.html'/>
    <area shape="circle" coords="9,131,42" alt='' href='Klocklock.html' />
    <area shape="circle" coords="128,49,81" alt='' href='index.html'/>
</map>

</div>

you can use title="" attribute inside the to display the info.. — Sahil Dhir, Apr 03 '17 at 07:25
could you please elaborate on that, ive used the tittle=" before but nothing seemed to work. The mouseover option seems to me accurate however i cannot get the mouseover to link to the area position, — harry, Apr 03 '17 at 08:55
just added it, its right before my explanation (before im having issues) — harry, Apr 03 '17 at 09:05
https://i.stack.imgur.com/ATmiU.jpg Check this.. Do you want this? — Sahil Dhir, Apr 03 '17 at 09:30
Hi not really, what i would like is the text to display above the image, so that when a user is hovering over a specific element it will display the text above the logo. With the text changing when your selecting each area but staying in the same position — harry, Apr 03 '17 at 09:40
more like this, https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h — harry, Apr 03 '17 at 09:50

score 5 · Accepted Answer · answered Apr 03 '17 at 10:52

I have created a demo using tooltipster jquery plugin and this is the best way I have found to do so ;)

$(document).ready(function() {
  $('.tooltip').tooltipster({

  });
});

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

<div>
  <img src="https://i.stack.imgur.com/JRo8A.png" id="logo" style="width: 260px; max-width: 100%;    
height: auto;" alt="" usemap="#map" />

  <map name="map">
    <area shape="circle" coords="243,132,41" href="Ktrack.html" class="tooltip" title="This is my image's tooltip message for area 1!" />
    <area shape="circle" coords="189,223,41" alt='' href="Kinsurance.html"  class="tooltip" title="This is my image's tooltip message for area 2!"/>
    <area shape="circle" coords="69,205,29" alt='' href='Khealth.html' class="tooltip" title="This is my image's tooltip message for area 3!"/>
    <area shape="circle" coords="9,131,42" alt='' href='Klocklock.html'  class="tooltip" title="This is my image's tooltip message for area 5!" />
    <area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="This is my image's tooltip message for area 6!" />
</map>

</div>

Thats exactly it, just have to play with the css to get the text to appear on the top of the image! Thanks so much Sahill! — harry, Apr 03 '17 at 10:59
You are welcome harry .. Please accept the answer and upvote if its what you want so that the people in future can refer to this ;) — Sahil Dhir, Apr 03 '17 at 11:01
is there a way to remove the dark grey background that appears when hovering over, so it just shows the text? — harry, Apr 03 '17 at 11:02
yes you can tweak the css seeing this http://iamceege.github.io/tooltipster/#styling — Sahil Dhir, Apr 03 '17 at 11:04
Hi sahil, I can't seem to be able to edit the hover text with css, would you be able to tell me what they should be called in CSS? many thanks — harry, Apr 03 '17 at 12:32

Imagemap; show text when hovering over certain area

1 Answers1