更改图像映射的颜色

Answer 1

区域标签必须有与之关联的图像。你不能只为其设置背景颜色。

您可以拥有所需颜色的纯图像，并将其放在区域标记的 href 属性上。

Answer 2

使用 中的蒙版的一种方法是， 标签也可以使用，它还可以创建多边形并为其着色。但您需要记住，这只是一个遮罩，如示例所示，您将需要三层：背景、多边形图像和带有映射的完全透明图像。

<div>
<img style="position:absolute; z-index:10;" usemap="#workmap" src="data:image/png;base64,iVBOR
w0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsM
AAA7DAcdvqGQAAAANSURBVBhXY2BgYGAAAAAFAAGKM+MAAAAAAElFTkSuQmCC" width="256" height="256">

<p style="position:absolute; z-index:5; left:140px; top:12px; font-size:55px;">😃</p>

<p style="position:absolute; z-index:8; left:52px; top:16px; color:white; font-size:20px;">Click me im <br> fake aera</p>

<svg style="position:absolute; z-index:7;" width="256" height="256" >
  <polygon points="30,20,30,80,100,80,160,110,128,80,160,80,160,20"
   style="fill:#00000050; stroke:#00000020;"/>
</svg>
</div>

<map name="workmap">
  <area shape="poly" coords="30,20,30,80,100,80,160,110,128,80,160,80,160,20" onclick="alert('Hello! I am an alert box!');">
</map>

Answer 3

请检查以下代码是否有效：

<area shape="poly" onclick="openNav()" class="poly" coords="902,516,936,496,940,535"/>

在 css 中，请进行更改：

.poly {
      backgroundColor = red;
}

只需检查这是否有效。我没有运行代码。