無法在單個圖像上顯示多個工具提示

請原諒我的冗餘代碼......我試圖創建彈出圖像，其中包含使用jquery的一些按鈕控件。無法在單個圖像上顯示多個工具提示

這裏是我試過至今： CSS代碼：

button.button { 顏色：#FFF;背景：＃000; font-size：.8em; font-weight：bold; font-family：Verdana，Arial，Helvetica，sans-serif; border：solid 1px＃ffcf31; }
.tooltip {
background：transparent url（〜/ Box.png）; display：none;
height：180px;
padding：0px 0px 10px 30px; width：320px;
font-size：14px;
color：＃000; 溢出：auto; border：2px純黑色; }

Javascript代碼：

$(document).ready(function() { 
     $("#Harmful_id").tooltip({ 
      offset: [10, 2], 
      effect: 'slide' 
     }); 
    }); 
    function replyclick(a) { 
     var e = document.getElementById(a); 
     if (!e) return true; 
     if (e.style.display == "none") { 
      e.style.display = "block"; 
     } else { 
      e.style.display = "none" 
     } 
     return true; 
    }

HTML代碼：

<img id="continuum" src= "~/abc.png" alt="" usemap="#JQTooltip" style="width: 766px; height: 397px; border:0px"/> 
    <map id="JQTooltip_map" name="JQTooltip"> 
    <area shape="rect" id="Harmful_id" coords="98,158,189,215" href="#" alt="" title=""/></map><div class="tooltip"> 
    <button type="button" class="button" id="btn1" onclick="replyclick('view1');"><b>1.</b></button><b onclick="replyclick('view1');"><u>Definition</u></b><div id="view1" style="display:none">Bla bla bla</div>

這適用於只有1圖像映射即COORDS的= 「98158189215」的一部分。我想繪製其他座標以及相同的圖像。

我想知道我應該做些什麼改變來適應映射其他座標！

來源

2013-01-03 Joy