无法突出显示区域地图

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>

函数边界

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

Answer 1

我建议您删除borderIt函数和onmouseover/onmouseout属性，因为使用此类元素进行管理很复杂。

只需使用这个很棒的jQuery插件，它将更加快速和容易。（仅适用于 jQuery lte 1.9）

Answer 2

这将

为类bordered的所有区域添加边框，根据自己的喜好进行更改。

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

有关更多详细信息，请参阅 http://www.w3schools.com/css/css_outline.asp。