在div中使用usemap而不使用img标记

Question

我使用div标签和css类的background-image属性显示我的图像。现在我想将图像用作地图。如何在没有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;    
}