如何在div背景url中使用usemap

发布于 2024-12-07 01:07:20 字数 348 浏览 0 评论 0原文

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

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫南 2024-12-14 01:07:20

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

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

这是一个示例： 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 <8。

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/

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.

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

回复收藏 0 原文

蝶…霜飞 2024-12-14 01:07:20

我只是来到这里，因为我正在尝试做同样的事情，并且我发现一个可以使用没有图像的“地图”。

正如其他人所说，不可能使用没有图像的地图，但我们可以使用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 图像映射

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 maps without image, but we can use DIV instead.

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

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 of my example.

Reference: CSS image maps

回复收藏 0 原文