在圖像上指定區域

Question

我嘗試對圖像執行操作，指定用戶可以單擊並轉到其他頁面的一個區域。我嘗試使用熱點編輯器並編寫下面的代碼。但沒有發生，我不明白我做錯了什麼。 如果有人有另一種解決方案，這將是很棒的。

<link rel="stylesheet" href="jquery-hotspotter-1.7.2.min.css"> 
    <script src="jquery-hotspotter-1.7.2.min.js"></script> 



<div data-role="content" id="test"> 
      <div class="hs-area"> 
      <img src="imagens/HomeHorizontal.jpg"/>  
     <div class="hs-wrap"><a target="_blank" href="http://www.google.pt"><div data-activeon="click" data-dim="378,224,0" data-coord="646,0" class="shadow-spot"></div></a> 
      <div 
      class="tt-wrap"> 
       <div data-anim="goin" data-dir="top" class="tip-tooltip"></div> 
     </div> 
    </div> 
    <div class="hs-wrap"> 
     <div data-activeon="click" data-dim="378,222,0" data-coord="646,223" class="shadow-spot"></div> 
     <div class="tt-wrap"> 
      <div data-dir="top" data-anim="goin" class="tip-tooltip"></div> 
     </div> 
    </div> 
    <div class="hs-wrap"> 
     <div data-activeon="click" data-dim="378,229,0" data-coord="646,445" class="shadow-spot"></div> 
     <div class="tt-wrap"> 
      <div data-dir="top" data-anim="goin" class="tip-tooltip"></div> 
     </div> 
    </div> 
    </div> 
     </div> 

Answer 1

如何在相對位置的DIV的背景加載圖像，只是添加鏈接元素絕對定位塊？難道這不適合你在做什麼？

HTML

<div id="example-image"> 
    <a href="#example-link" class="hotspot" style="top:40px;left:80px;width:50px;height:50px;">&nbsp;</a> 
    <a href="#example-link2" class="hotspot" style="bottom:80px;right:100px;width:20px;height:40px;">&nbsp;</a> 
</div> 

CSS

#example-image { 
    position:relative; 
    width: 500px; 
    height: 200px; 
    background:transparent url('example.jpg') top left no-repeat; 
} 

#example-image .hotspot { 
    position:absolute; 
    display:block; 
}