影像图; 将鼠标悬停在特定区域时显示文本

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> 

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