1图片2链接 [英] 1 image 2 links

问题描述

如何使图像在HTML中的图像的不同区域中可单击，并导致不同的URL ...例如，如果您将图像设为1个图像，则我有一个图像或按钮"，但我希望它实际上是2个链接...按钮的一侧是注册"，另一侧是尝试"

how do you make an image be clickable in in HTML in different areas of the image and lead to different URL's... for instance I have an image or "button" if you will that is 1 image but I want it to actually be 2 links... one side of the button is "sign up" while the other side is "try out"

推荐答案

使用CSS精灵

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

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.

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

Using map is justified only when image is part of content — for exemple, it is real map :)

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

这篇关于1图片2链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！