在图像上指定区域

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; 
}