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属性，因为使用这种元素进行管理很复杂。

只需使用this great jQuery plugin，就会更加快捷方便。（仅适用于jQuery lte 1.9）

Answer 2

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

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

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

无法突出显示区域地图

2 个答案: