Не удалось выделить карту области

Question

Я пытаюсь создать карту области, но хочу выделить область газеты, такую ​​как рамка красного цвета, но я не понимаю, как это сделать.

Я создаю карту области, как следующие:

<div> 
<img src="http://cantact104.com/wp-content/plugins/eNewsPaper/menu-pages/newspaper/01_17.jpg" id="photo" usemap="#planetmap"> 
</div> 
<map name="planetmap"> 
<area shape="rect" style="cursor:pointer;" coords="360,6.3,976.5,827.1" target="_blank" onclick="return hello(1);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,407.7,667.8,826.2" target="_blank" onclick="return hello(2);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,1.8,362.7,404.1" target="_blank" onclick="return hello(3);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"><area shape="rect" style="cursor:pointer;" coords="0,826.2,976.5,1543.5" target="_blank" onclick="return hello(4);" alt="Sun" onmouseover="borderit(this,'black')" onmouseout="borderit(this,'white')"></map> 

функция borderit

function borderit() 
{ 
alert('dd'); 
jQuery(this).css("background-color","yellow"); 
} 
</script> 

Answer 1

Это добавит границу всей площади с классом bordered, изменения по своему вкусу.

area.bordered{ 
    outline:1px solid red; 
} 

Для получения более подробной информации см. http://www.w3schools.com/css/css_outline.asp.

Answer 2

Я предлагаю вам удалить свои функции borderIt и onmouseover/onmouseout, потому что это сложно управлять с помощью таких элементов.

Просто используйте this great jQuery plugin, он будет более быстрым и легким. (работает только с jQuery lte 1.9)