using jquery i want place an image over another based on the coordinates

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

where's the add image code? all you are doing is changing the background color on that click. — Joseph, Dec 14 '11 at 14:18
I'm guessing you mean add an image over the tree that corresponds to one of the image map areas? What is the 3rd coordinate for? — will, Dec 14 '11 at 14:21
see this: http://stackoverflow.com/questions/7019947/set-a-background-color-on-the-html-area-element — Joseph, Dec 14 '11 at 14:27
http://api.jquery.com/offset/ - this will help you. just need to get position, create ne div and change position — Narek, Dec 14 '11 at 14:29

score 1 · Answer 1 · answered Dec 14 '11 at 14:28

1

I'm afraid, it is not possible to set background on <area> as it is not a graphical element. If it was possible some would use it earlier to create simple <canvas> :)

Here is a forum, where people speak about similar

answered Dec 14 '11 at 14:28

Alexander Yezutov

3,144
2
21
23

score 1 · Accepted Answer · answered Dec 14 '11 at 14:53

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.

score 0 · Answer 3 · answered Dec 14 '11 at 14:35

I'll use <a> instead of map, which should help you achieve the same thing. Just set them as 'position:absolute' with 'top' and 'left' having the value of coordinates, and 'width', 'height' with the value of size (as it's only 13 pixels, I don't thing rectangle and circle will be that different). Assign them with a class name so you can select them with jQuery. And don't forget to set the 'container' as 'position:relative'.

score 0 · Answer 4 · answered Dec 14 '11 at 14:55

0

Try out this plugin it might help.still in development but you can have a look at it. http://archive.plugins.jquery.com/project/maphilight Here is the demo link http://davidlynch.org/projects/maphilight/docs/demo_world.html

answered Dec 14 '11 at 14:55

koneru

76
2

using jquery i want place an image over another based on the coordinates

4 Answers4