如何在 div 背景 url 中使用 usemap答案

【问题标题】：How using usemap in div background url如何在 div 背景 url 中使用 usemap
【发布时间】：2013-12-03 02:08:01
【问题描述】：

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

.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，可以吗？

【问题讨论】：

标签： html background

【解决方案1】：

您不能将图像映射放在背景中。如果您需要此功能，则必须对对象进行分层以实现相同的目的：

第一层：只是您的图像（未绑定到图像映射）
第二层：容器的内容你想出现在 “背景”
第三层：图像的另一个副本绑定到图像映射，但透明。

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

以下是实现此效果的一般构造。它的工作原理是在最顶层有一个图像映射（因此它将处于活动状态），但绑定到一个透明图像。您看到的实际图像在所有事物的背后，并且不透明。

您也可以通过跳过第一个图像并将其作为背景分配给 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

【讨论】：

【解决方案2】：

我只是来到这里，因为我也在尝试做同样的事情，我找到了一个使用“地图”而不使用图像的人。

正如其他人所说，isn't possible use maps 没有图像，但我们可以使用 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 image maps

【讨论】：

这是一种可行的方法，但前提是您需要矩形区域。这在处理圆形和多边形时是不可能的。

【解决方案3】：

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

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

【讨论】：