HTML image mapping alternative [duplicate]

Question

Possible Duplicate:
Are HTML Image Maps still used?

I have an image:

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?

Answer 1

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.sstatic.net/8GvME.png">
</div>

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