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?

Answer 1

You may use jQuery:

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

Answer 2

You can use CSS

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

Answer 3

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

Answer 4

Use the below JQuery code on click :

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