Html 1图2链接

你如何使一个图像可以在HTML中点击图像的不同区域，并导致不同的URL的。。。例如，我有一个图像或“按钮”，如果你愿意，这是一个图像，但我希望它实际上是2个链接。。。按钮的一边是“注册”，另一边是“试用”

使用HTML图像地图：

例如：

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

使用CSS精灵 我认为最好的方法是使用CSS精灵：。 使用它的主要好处-你的图像不会成为内容的一部分，它只是装饰。因此，您的内容将是可访问的。您还可以通过css轻松更改站点的装饰，并使用其他图像

只有当图像是内容的一部分时，使用

map

才是正确的-例如，它是：）

HTML

---

完全出于好奇，有没有理由不在图像编辑程序中剪切图像，并拥有两张图像，每个图像都有自己的锚？图像映射（建议如下）将正常工作。就像我说的，只是好奇：）首先，多个图像意味着浏览器的多个请求。因此，例如，如果您有用于数字列表（如1到10）的图像（在分页中），则最好使用带有图像映射的单个图像。如果您使用图像“用于数字列表（如1到10）”，则您做错了。我同意：）。然而，为了扩展这个论点，如果我想要一种奇特的字体，而不想依赖浏览器字体支持，该怎么办。或者，如果我正在开发一些非英语的页面，又不想依赖于客户端有正确的字体。当然，有更好的例子来证明图像地图的合理性，但正如你所能想象的，我只是想保护我的立场，因为我被高尔德抓住了；）@JP19：你可以使用CSS精灵，你只需要向服务器发出一个请求。你也可以创建任意多边形、圆等，而不是矩形。也可以看看这个：也许它会派上用场。

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

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