1 image 2 links

Question

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"

Answer 1

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