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"

Edmondedmonda

Strictly out of curiosity, any reason not to cut the image up in an image editing program and have 2 images, each with their own anchors? The image map (suggested below) will work fine. Like I said, just curious :) – Postfree

For one, multiple images means multiple requests by the browser. Hence for example, if you have images for a list of numbers like 1 to 10 (in pagination), its better to have single image with an image map. – Albinaalbinism

If you are using images "for a list of numbers like 1 to 10", then you are doing something wrong. – Aziza

I do agree :). However, just for sake of extending the argument, what if I want a fancy font AND do not want to depend on browser font support. Or if I am developing some non-english language pages and again don't want to depend on client having the right fonts. There are of course better examples for justifying image maps but as you can imagine, I just wanted to protect my stance having been caught off-gaurd ;) – Albinaalbinism

@JP19: You can use CSS sprites and you only do 1 request to the server. – Procora

@nico: Sounds cool. Need to learn it! Of late, I am concerned about reducing number of requests when user visits my site for the first time (too many js/css/image request as of now). – Albinaalbinism

@JP19: Have a look at this ALA article: alistapart.com/articles/sprites – Procora

@JP -FWIW, I wasn't trying to start an argument, nor was I trying to catch you "off guard". Sorry if you took it that way. I was just genuinely curious about your rationale. Thanks for explaining. – Postfree

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

Scrotum

Answer 2

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>

Albinaalbinism

You can also create arbitrary polygons, circles, etc instead of rectangles. – Albinaalbinism

Check this out too: w3schools.com/tags/tryit.asp?filename=tryhtml_areamap maybe it will come in handy. – Boehmenist