如何在div背景url中使用usemap

Question

我想念你能帮助我吗？我有这样的风格

.lorry{
    background: url(../img/lorry.png);background-repeat:no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
    height: 143px;
    width: 385px;
    float: left;
    margin: 39px 0 0 0;
}

我想在图像上添加usemap,是否可能？

Answer 1

您不能将图像映射放在后台.如果您需要此功能,则必须对对象进行分层才能实现相同的功能:

• 第一层:只是你的图像(没有绑定到imagemap)
• 第二层:要在"背景"上显示的容器内容
• 第三层:图像的另一个副本绑定到图像映射,但是透明.

这是一个例子:http://jsfiddle.net/jamietre/fgeee/1/

以下是实现此效果的一般结构.它的工作原理是在最顶层上设置一个imagemap(因此它将处于活动状态),但绑定到透明图像.您看到的实际图像背后是一切,并且不透明.

您还可以通过跳过第一个图像并将其指定为layer2 div的背景来执行此操作.这只有在您要以原始分辨率显示图像时才有效,所以可能没问题,但这个答案更为通用.

<div id="wrapper">
    <img id="layer1" src="some/image.jpg">
    <div id="layer2" style="position: absolute; top: 0; left: 0;">
         Your content here
    </div>
    <img id="layer3" 
      style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);" 
      usemap="#your-map" src="some/image.jpg">
</div>

笔记:

• 包装器需要进行绝对定位工作
• *filter:.. css是支持IE <8,它不理解不透明度.

Answer 2

我刚刚来到这里,因为我试图做同样的事情,我发现一个人使用"地图"没有图像.

正如其他人所说,不可能使用没有图像的地图,但我们可以使用DIV代替.

你要做的是,在主图像上放置一个div并为该DIV创建一个链接,下面是我的代码:

HTML

<div id="progress"> 
   <a id="link1" title="Symbol Link" href="#">Symbol Link</a>
   <a id="link2" title="Stack Link" href="#">Stack Link</a>
   <a id="link3" title="Overflow Link" href="#">Overflow Link</a>
</div>

CSS

#progress {
    width: 257px;
    height: 84px;
    background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
    position:relative;
}
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;    
}

我的例子中的 jsFiddle.

参考:CSS图像映射

Answer 3

不可能在具有背景图像的对象上使用图像映射。usemap 属性需要图像（img 标签）。

参考： http: //www.w3schools.com/tags/att_img_usemap.asp