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

Reset to default
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.