html - 1 张图片 2 个链接

Question

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

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

Answer 2

使用 CSS 精灵

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

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