Укажите область на изображении

Question

Я пытаюсь сделать на изображении указать одну область, где пользователь может щелкнуть и перейти на другую страницу. Я пытаюсь использовать редактор hotspotter и писать код ниже. но ничего не случилось, я не понимаю, что я делаю неправильно. если у кого-то есть другое решение для этого, это было бы потрясающе.

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