<style>
.outerDIV {
background-image:
url('http://www.experts-exchange.com/images/experts-exchange/experts-exchange-logo.png');
background-repeat: no-repeat;
width: 270px;
height: 50px;
}
#e {
position: absolute;
top: 23px;
height: 15px;
width: 13px;
left: 9px;
}
#x {
position: absolute;
top: 23px;
height: 15px;
width: 13px;
left: 25px;
}
#p {
position: absolute;
top: 23px;
height: 15px;
width: 13px;
left: 38px;
}
</style>
<script>
function showAlert(div) {
alert(div.id);
}
</script>
<div id="bgContainerFade" class="outerDIV">
<div id="e" onclick="javascript: showAlert(this);"></div>
<div id="x" onclick="javascript: showAlert(this);"></div>
<div id="p" onclick="javascript: showAlert(this);"></div
<div id="e2"></div>
<div id="r"></div>
<div id="t"></div>
<div id="s"></div>
<div id="e3"></div>
<div id="x2"></div>
<div id="c"></div>
<div id="h"></div>
<div id="a"></div>
<div id="n"></div>
<div id="g"></div>
<div id="e4"></div>
</div>
http://www.w3schools.com/tags/tag_map.asp