更改 HTML <area> 元素的背景颜色

Question

我有一张包含 100 多个不同大小和尺寸的几何形状的图像。我在其上使用图像映射并为每个 <area> 分配 ID，例如 <area id="1"> 。我在 MySQL 数据库中存储了关于每个形状的记录，例如：

 --------------------
box_id | color_code
--------------------
   1      #AEEE11
   2      #AEEE01
   3      #DEEF11
   4      #0EE001
--------------------

现在我想根据每个区域的 ID 设置背景色。

在这里，我为某些区域粘贴 HTML 代码，因为整个页面会增加我的帖子：

 <img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">
    <area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
    <area id="1" shape="poly" coords="163,148,163,170,159,170" />
    <area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
    <area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
    <area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
    <area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
    <area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
    <area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
    <area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
    <area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
    <area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
    <area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
    <area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>

我也试过：

 <area id="1" shape="poly" coords="604,140,657,140,677,160,677,234,605,234" style="background-color:#00FFEE;" />

但不起作用… :(

原文由 PHP Ferrari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为你应该使用 jquery imagemap 插件……这是我最喜欢的

链接：http: //archive.plugins.jquery.com/project/maphilight

演示： http ://davidlynch.org/projects/maphilight/docs/demo_usa.html

这里也详细讨论了这个话题……

使用带有 HTML 图像映射的 JQuery 悬停

我认为不需要重复

=============更新您的评论===================

转到 https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js

你能看到以下 maphilight 接受 fillColor: ‘000000’ ;

您需要将 fillOpacity 更改为 1.0 以移除不透明度

您需要做的就是通过编辑下面的代码并替换为您的代码，无需将鼠标悬停在工作上

        $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });;

你有一个工作背景颜色版本……

谢谢 ：）

原文由 Baba 发布，翻译遵循 CC BY-SA 3.0 许可协议