Adding borders to image on click or mouse hover

Question

I want to add round borders to selected image areas on a map, how do I do it?

score 2 · Answer 1 · answered May 16 '12 at 07:07

2

You may use jQuery:

$('body').on('click', 'img', function() {
    $(this).addClass('with-round-corners');
});

answered May 16 '12 at 07:07

hasrthur

I want to apply the border, which should be round, only on selected image areas tags, how do I do it? – Joy May 16 '12 at 07:13
use webkit-border-radius:50% with this answer – Ranganadh Paramkusam May 16 '12 at 07:36

score 0 · Answer 2 · answered May 16 '12 at 07:10

0

You can use CSS

img{
    border:none;
}
img:hover{
    border:1px solid;
}

answered May 16 '12 at 07:10

I want to apply the border, which should be round, only on selected image areas tags, I do not think this would help. – Joy May 16 '12 at 07:13

score 0 · Answer 3 · answered May 16 '12 at 07:19

0

img
{
border:0px;
}
img:hover
{
border:1px solid black;
border-radius:5px;
}

answered May 16 '12 at 07:19

cgvector

score 0 · Answer 4 · answered May 16 '12 at 07:19

0

Use the below JQuery code on click :

$(imageAreasSelector).css({ 'border': '1px solid Red' });
$(imageAreasSelector).css({ 'border-radius': '5px' });

answered May 16 '12 at 07:19

HGK

Would have done that, unfortunately the image selectors does not have any id. It is populated dynamically from server side(ASP.NET) which does not let you add any id attribute. – Joy May 17 '12 at 08:47

4 Answers4