3

可能重复：
是否仍在使用 HTML 图像映射？

我有一张图片：

在此处输入图像描述

单击时我想绑定一个函数。我遇到的问题是单击时它下面的 div 需要触发另一个功能，并且由于顶部 div 下方的空白区域很乱。

我知道 html 图像映射可以解决这个问题，但我知道现在已弃用。有没有我可以使用的替代方案？

4

2 回答 2

1

我已经重新阅读，我想我更充分地理解了你的问题。

检查这个 jsFiddle：http: //jsfiddle.net/5p9DE/

这几乎相同，因此您可以看到#phone div：http: //jsfiddle.net/BPbk6/

为了完整起见，代码：

CSS：

#container {
    position: relative;
}

#phone {
    position: absolute;
    top: 34px;
    left: 70px;
    width: 250px;
    height: 25px;
    -webkit-transform:rotate(-11deg);
}

#phone a {
    display: block;
    width: 250px;
    height: 25px;
}

#phone a span {
    margin-left: -9999px;
}

HTML：

<div id="container">
    <div id="phone"><a href="/page.htm"><span>Link text</span></a></div>
    <img src="http://i.stack.imgur.com/8GvME.png">
</div>

而且，正如其他人所说，您仍然可以使用 HTML 图像映射。这是一个 CSS 替代方案。

于 2012-08-19T00:06:03.570 回答
0

从该图像和描述中确切地说出您想要实现的目标有点困难，但我会试一试。

我通常处理这个的方法是切片图像。从实际背景和您希望可点击的区域制作单独的图像。然后，您将可点击的图像作为背景添加到<a>链接到您想要的任何内容的标签中，并使用一些 css 正确定位它（可能绝对是具有背景的父级）。如果您可以向我们展示一些有关小提琴之类的实际代码，我可以证明我的意思...

于 2012-08-19T00:08:52.993 回答