javascript - 更改 HTML 中选定区域的背景颜色/不透明度

Question

如何更改图像中特定区域的背景颜色或不透明度？

这是我的 HTML、javascript 和 CSS

function myFunction()
{
    document.getElementById('testid').setAttribute("class", "style1");
}

.style1{
background: red
}

<img src="http://mridulahuja.com/uploads/1/3/8/6/13860206/_____2659642_orig.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map" href="www.mridulahuja.com">
    <area alt="" title="" href="#" shape="poly" id="testid" onlcick="myFunction()" coords="117,36,162,20,193,34,189,55,108,55" />

 <area alt="" title="" href="#" shape="poly" coords="33,93,33,119,32,143,32,169,32,186,31,191,94,194,123,194,149,193,164,193,158,119,186,119,216,118,227,115,224,82,103,83,31,82" />
    
</map>

我也尝试过不透明度，但似乎没有任何效果。有什么想法吗？

查看jsfiddle

Answer 1

您将无法使用图像 map 执行此操作，因为区域不支持您想要的CSS属性。您应该尝试创建一个CSS map 仅与绝对定位的 div 或定位的 img 上的 anchor 基本相同。有很多在线工具可以为您做到这一点 - 例如 this one .

代码示例:

<div style="position:relative; width..., height... background:url(..your image...)">

    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>

</div>

使用 CSS:

a.area:hover{background:red;}

当您需要突出显示具有边框、背景甚至 css3 属性(例如发光效果)的区域时，通常会使用 CSS 贴图，并且也可在不支持图像贴图的情况下使用，例如 facebook FBML 选项卡等。