1 张图片 2 个链接答案

【问题标题】：1 image 2 links1 张图片 2 个链接
【发布时间】：2011-05-17 08:21:04
【问题描述】：

如何使图像在图像的不同区域中的 HTML 中可点击并导致不同的 URL...例如，我有一个图像或“按钮”，如果你愿意，那是 1 个图像，但我想要它实际上是2个链接...按钮的一侧是“注册”，而另一侧是“试用”

【问题讨论】：

完全出于好奇，有什么理由不在图像编辑程序中剪切图像并拥有 2 张图像，每张图像都有自己的锚点？图像映射（建议如下）可以正常工作。就像我说的，只是好奇:)
一方面，多张图片意味着浏览器的多次请求。因此，例如，如果您有 1 到 10 等数字列表的图像（在分页中），最好使用带有图像映射的单个图像。
如果您使用图像“用于 1 到 10 之类的数字列表”，那么您做错了。
我同意:)。但是，只是为了扩展参数，如果我想要一种花哨的字体并且不想依赖浏览器字体支持怎么办。或者，如果我正在开发一些非英语语言页面，并且不想依赖具有正确字体的客户端。当然有更好的例子来证明图像地图的合理性，但正如你可以想象的那样，我只是想保护我的立场，因为我的立场被打了个措手不及；）
@JP19: 你可以使用 CSS sprites 并且你只向服务器发出 1 个请求。

【解决方案1】：

使用 HTML 图像映射：http://www.javascriptkit.com/howto/imagemap.shtml

例子：

<img src="button.gif" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="http://www.yoursite.com/link1.html">
<area shape="rect" coords="50, 0, 100, 100" href="http://www.yoursite.com/link2.html">
</map>

【讨论】：

您还可以创建任意多边形、圆形等来代替矩形。
也看看这个：w3schools.com/tags/tryit.asp?filename=tryhtml_areamap 也许它会派上用场。

【解决方案2】：

使用 CSS 精灵

我认为最好的方法是使用 CSS sprite：http://www.jsfiddle.net/pereskokov/vVhde/1/。使用它的主要好处——你的图像不会成为内容的一部分，它只是装饰。所以您的内容将是可访问的。您还可以通过 css 轻松更改网站的装饰并使用其他图像。

仅当图像是内容的一部分时才使用map 是合理的——例如，它是real map :)

HTML

<a href="#login" title="Log In" id="login"><span></span>Log In</a>
<a href="#signin" title="Sign In" id="signin"><span></span>Sign In</a>

CSS

#login, #signin {
    width: 50px;
    height: 27px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#login span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) 0 0 no-repeat;
}

#signin span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) -50px 0 no-repeat;
}

【讨论】：