5

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"

Blair Conrad
  • 233,004
  • 25
  • 132
  • 111
Ryan Murphy
  • 65
  • 1
  • 1
  • 8
  • 2
    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 :) – charliegriefer Nov 29 '10 at 15:24
  • 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. –  Nov 29 '10 at 15:27
  • 2
    If you are using images "for a list of numbers like 1 to 10", then you are doing something wrong. – RoToRa Nov 29 '10 at 15:30
  • 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 ;) –  Nov 29 '10 at 15:39
  • 1
    @JP19: You can use CSS sprites and you only do 1 request to the server. – nico Nov 29 '10 at 15:58
  • @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). –  Nov 29 '10 at 16:02
  • @JP19: Have a look at this ALA article: http://www.alistapart.com/articles/sprites – nico Nov 29 '10 at 16:13
  • @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. – charliegriefer Nov 30 '10 at 06:53

2 Answers2

13

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>
  • You can also create arbitrary polygons, circles, etc instead of rectangles. –  Nov 29 '10 at 15:25
  • 1
    Check this out too: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap maybe it will come in handy. – Trufa Nov 29 '10 at 15:51
3

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