javascript - 在没有 img 标签的 div 中使用 usemap

Question

我正在使用 css 类的 div 标签和 background-image 属性显示我的图像。现在我想将图像用作 map 。如何在没有 img 标签的情况下使用 div 内的 usemap 属性？请注意，我想避免使用 img 标签。

这是我的CSS

.myStyle
{
  background-image: url('../images/myimg.png');
}

这是div

<div class=myStyle></div>

Answer 1

您不能使用 usemap，但您可以使用 div 内的标签通过 css 模拟 usemap，并根据您的链接放置它们，引用此 http://jsfiddle.net/yAZxK/35/

HTML

<div class=myStyle>
<a id="link1" href="#">Link</a>
<a id="link2" href="#">Link</a>
<a id="link3" href="#">Link</a>
</div>

CSS

a#link1, a#link2, a#link3 {
    display: block;
    overflow: hidden;
    position: absolute;   
    background: transparent;
    text-indent: -9999px; 
}
#link1 {
    left: 10px;
    width: 45px;
    height: 84px;

}
#link2 {
    left: 55px;
    top: 45px;
    width: 70px;
    height: 39px;    
}
#link3 {
    top: 45px;
    left: 124px;
     width: 130px;
     height: 39px;    
}