Question

I’m trying to place an image over another based on the coordinates.

My html is:

<button id="add">add image</button>
<div id="container">
    <img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="400" usemap="#treemap" />
</div>
<map name="treemap">
    <area shape="circle" coords="345,483,13" alt="Venus" href="#" />
    <area shape="circle" coords="333,361,13" alt="Venus" href="#" />
    <area shape="circle" coords="302,284,13" alt="Venus" href="#" />
    <area shape="circle" coords="79,350,13"  alt="Venus" href="#" />
    <area shape="circle" coords="55,489,13"  alt="Venus" href="#" />
</map>

My script is:

$('document').ready(function(){
    $('#add').click(function() {
        $('area[alt=Venus]').css('background','http://www.rangde.org/newsletter/nov11/images/green-ball.png');
    });
});

Here is my jsfiddle

Answer 1

This isn’t an appropriate use of an image map, unfortunately, because they’re not actually an element that can be styled.

However, if you switched this over to use some absolutely positioned divs in the same location as your mapped circles, combined with the CSS border-radius property, you can create the effect you’re looking for: http://jsfiddle.net/N6Sbt/1/

That should be a pretty straightforward solution to your problem.