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

您无法在后台放置图片地图。如果您需要此功能，则必须对对象进行分层以实现相同的目的：

第一层：只是您的图片（未绑定到图片地图）
第二层：要在其上显示的容器内容＆＃34;背景＆＃34;
第三层：图像的另一个副本绑定到图像地图，但透明。

以下是一个例子：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＆lt; 8，它不了解不透明度。

Answer 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

Answer 3

无法在具有背景图像的对象上使用图像映射。 usemap属性需要图像（img标记）。

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

如何在div背景url中使用usemap

3 个答案: