HTML图像映射的替代方案

Question

可能是重复问题：
HTML图像映射还在使用吗？

我有一张图片：

我想把一个函数绑定到它被点击时。我的问题是，在下面的div被点击时需要触发另一个函数，但是由于顶部div下面的空白部分，它看起来很乱。

我知道html图像映射可以解决这个问题，但是我了解到现在已经废弃了。有没有其他的替代方法可以使用？

- Nick Hurford

---

它并没有被弃用：https://dev59.com/0nA65IYBdhLWcg3w-z5A - Waleed Khan

我赞同arxanas的观点，你仍然可以使用图像映射 - https://dev59.com/0W435IYBdhLWcg3wuimz - kapa

@arxanas - 由于HTML5仍然（在某种程度上）不太稳定，指向实际的当前规范可能会有所帮助。请注意，翻译尽可能保持原文意思不变，语言通俗易懂，不包含任何解释或其他信息。 - Jared Farrish

Answer 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的替代方案。

- tptcat

Answer 2

从那张图片和描述来讲，很难确切地知道你想达到什么目的，但我会尝试解释。

通常我处理这个问题的方式是从图像中切割出不同的部分。制作一个与实际背景和你想要点击的区域分离的图片。然后将该可点击的图像添加为标签的背景链接到你想要的内容上，并使用一些CSS正确定位（可能是绝对定位于具有背景的父元素）。如果你能在诸如fiddle之类的网站上展示一些实际代码，我可以演示我的意思...

- Pevara