1 image 2 links

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 w开发者_如何学运维ill 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"

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>

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