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> 

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> 

• javascript
• jquery
• html
• css

• you can use title="" attribute inside the <area> to display the info.. – Sahil Dhir Commented Apr 3, 2017 at 7: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 Commented Apr 3, 2017 at 8:55
• can you upload logocopy3 image here? – Sahil Dhir Commented Apr 3, 2017 at 9:02
• just added it, its right before my explanation (before im having issues) – harry Commented Apr 3, 2017 at 9:05
• i.sstatic/ATmiU.jpg Check this.. Do you want this? – Sahil Dhir Commented Apr 3, 2017 at 9:30

1 Answer 1

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./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.sstatic/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>