如何更改图像中特定区域的背景颜色或不透明度?
这是我的 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
最佳答案
您将无法使用图像 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 选项卡等。
关于javascript - 更改 HTML 中选定区域的背景颜色/不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36247519/