HTML image mapping alternative

Question

Possible Duplicate:
Are HTML Image Maps still used?

I have an image:

enter image description here

Which I want to bind a function to when clicked. The problem I have is the div underneath it when clicked needs to fire another function and because of the blank space underneath the top div it's messy.

I'm aware that html image mapping can solve this problem but I understand this is now deprecated. is there an alternative I can use?

It's not deprecated: http://stackoverflow.com/questions/3528746/are-image-maps-map-deprecated — Waleed Khan, Aug 19 '12 at 00:06
I second arxanas, you can still use image maps - http://stackoverflow.com/questions/5249502/are-html-image-maps-still-used — kapa, Aug 19 '12 at 00:12
@arxanas - Since HTML5 is still (somehow) in flux, pointing to the [actual current spec](http://dev.w3.org/html5/spec/single-page.html#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts-diagrams-graphs-maps-illustrations) is probably useful. — Jared Farrish, Aug 19 '12 at 00:13

tptcat · Answer 1 · 2012-08-19T00:21:34.793

I've re-read and I think I understand your issue more fully.

Check this jsFiddle: http://jsfiddle.net/5p9DE/

and this almost identical one so you can see the #phone div: http://jsfiddle.net/BPbk6/

and for completeness, the code:

CSS:

#container {
    position: relative;
}

#phone {
    position: absolute;
    top: 34px;
    left: 70px;
    width: 250px;
    height: 25px;
    -webkit-transform:rotate(-11deg);
}

#phone a {
    display: block;
    width: 250px;
    height: 25px;
}

#phone a span {
    margin-left: -9999px;
}

HTML:

<div id="container">
    <div id="phone"><a href="/page.htm"><span>Link text</span></a></div>
    <img src="https://i.stack.imgur.com/8GvME.png">
</div>

And, as others have said, you still can use HTML image maps. This is a CSS alternative.

score 0 · Answer 2 · answered Aug 19 '12 at 00:08

It is a bit hard to tell exactly what you are trying to achieve from that image and the description, but i will give it a try.

The way i usualy approach this, is by slicing the image. Make a separate image from the actual background and the area you want to be clickable. Then you add the clickable image as a background to a <a> tag linking to whatever you desire, and position it correctly (probaly absolute to the parent with the background) using some css. If you can show us some actual code on something like fiddle i can demonstrate what i mean...

HTML image mapping alternative

2 Answers2