Html 如何在 div 背景 url 中使用 usemap

How using usemap in div background url

提问by kusanagi

i missed you can you help me? i have such style

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

.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;
}

I want to add usemap on image, is it possible?

我想在图像上添加 usemap，可以吗？

回答by Jamie Treworgy

You can't put an imagemap in a background. If you need this functionality you will have to layer objects to achieve the same thing:

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

• First layer: just your image (not bound to imagemap)
• Second layer: the contents of the container that you want to appear over the "background"
• Third layer: another copy of the image bound to the image map, but transparent.

• 第一层：只是你的图像（不绑定到图像映射）
• 第二层：要在“背景”上显示的容器内容
• 第三层：图像的另一个副本绑定到图像映射，但透明。

Here's an example: http://jsfiddle.net/jamietre/fgeee/1/

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

Below is the general construct to achieve this effect. It works by having an imagemap on the topmost layer (so it will be active), but bound to a transparent image. The actual image you see is behind everything, and is not transparent.

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

You can also do this with two layers by skipping the first image, and assigning it as a background to the layer2 div. This will only work if you are going to display the image at its native resolution, so may be fine, but this answer is more general purpose.

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

Notes:

笔记：

• The wrapper is required to make the absolute positioning work
• the *filter: .. css is to supporter IE <8 which doesn't understand opacity.

• 需要包装器才能使绝对定位工作
• *filter: .. css 是支持 IE <8 的，它不理解不透明度。

回答by Eduardo M

I just come up here because I was trying do the same, and I found one one to use "map" without image.

我来到这里是因为我正在尝试做同样的事情，我找到了一个使用“地图”而没有图像的方法。

As the other folks said, isn't possible use mapswithout image, but we can use DIV instead.

正如其他人所说，不可能使用没有图像的地图，但我们可以改用 DIV。

What you do is, you place a div over the main image and create a link for that DIV, below follows my code:

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

HTML

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

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;    
}

jsFiddleof my example.

jsFiddle我的例子。

Reference: CSS image maps

参考：CSS 图像映射

回答by Xavjer

Using an imagemap on an object with a background-image is not possible. The usemap attribute requires an image (img tag).

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

Reference: http://www.w3schools.com/tags/att_img_usemap.asp

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