イメージマップ。特定の領域にカーソルを置いたときにテキストを表示する

Question

logocopy3 イメージの特定の部分（エリアマップ）とホバー効果をリンクする問題があります。現在、私はイメージマップの各セクションをクリックすることができ、必要なページに誘導しますが、ユーザーがクリックする前にホバー効果を表示して、どのページにナビゲートしているかを知りたいと思います。 基本的には、ユーザーが特定の領域を移動するたびに、イメージマップの上に同じ位置にあるテキストを表示しようとしています。次のように

私のコードは次のとおりです。

<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

私はtooltipsterのjQueryプラグインを使用してデモを作成し、これは私がそうすることを発見した最良の方法です;）

$(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>