0

我尝试在图像上指定一个区域，用户可以单击并转到其他页面。我尝试使用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>
4

1 回答 1

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;
}
于 2013-04-10T13:12:47.760 回答