0
\$\begingroup\$

Let's say I have this map:

<map name="diffmap1" id="diffmap1" class="myMap">
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2">
</map>

and javascript:

$('.diff').click(function(e){
//code here
});

How can I make when I click on one one 'diff' to make a div with border appear around that 'diff'?

It has to calculate the position automatically, like the margin-top, margin-left and size based on the coordonates.

Any thoughts?

\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

You can get the coordinates of your ".diff" with offset.

$(".diff").click(function(e)) {
    var offset = $(this).offset();
    var width = $(this).width();
    var height= $(this).height();
    // use offset.left and offset.top
    $(body).append("<div style=\"position:absolute;left:"+offset.left+";top:"+offset.top+";width:"+width+";height:"+height+";border:5px solid red\"></div>");
});

the generated div should be like (border red 5px) :

<div style="position:absolute;left:15px;top:20px;width:40px;height:100px;border:5px solid red"></div>
\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .