当前位置：文江博客话题详情

1 张图片 2 个链接

发布于 2024-10-05 04:31:04 字数 114 浏览 13 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七月上 2024-10-12 04:31:04

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

Use HTML image maps: http://www.javascriptkit.com/howto/imagemap.shtml

Example:

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

回复收藏 0 原文

孤独岁月 2024-10-12 04:31:04

使用 CSS-sprites

我认为最好的方法是使用 CSS sprite： http://www.css-sprites.html 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;
}

Use CSS-sprites

I think that the best way is to use CSS sprite: http://www.jsfiddle.net/pereskokov/vVhde/1/.
Main benefit of using it — your image will not be a part of content, it's just decor. So your content will be accessible. Also you can easy change decoration of your site via css and use another image.

Using map is justified only when image is part of content — for exemple, it is 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;
}

回复收藏 0 原文

~没有更多了~