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

\n\n

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

\n\n

仅当图像是内容 \xe2\x80\x94 的一部分时使用map才合理，例如，它是真实地图:)

\n\n

超文本标记语言

\n\n

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

\n\n

CSS

\n\n

#login, #signin {\n    width: 50px;\n    height: 27px;\n    overflow: hidden;\n    position: relative;\n    display: block;\n    float: left;\n}\n\n#login span {\n    width: 50px;\n    height: 27px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: url(http://dl.dropbox.com/u/5988007/sprite.png) 0 0 no-repeat;\n}\n\n#signin span {\n    width: 50px;\n    height: 27px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: url(http://dl.dropbox.com/u/5988007/sprite.png) -50px 0 no-repeat;\n}\n

\n