更改 HTML 元素的背景颜色

我有一张包含 100 多个不同大小和尺寸的几何形状的图像。我在它上面使用了图像映射并为每个分配了 ID<area> like <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;" />

但不工作...:(

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

Link : http://archive.plugins.jquery.com/project/maphilight http://archive.plugins.jquery.com/project/maphilight

Demo : http://davidlynch.org/projects/maphilight/docs/demo_usa.html http://davidlynch.org/projects/maphilight/docs/demo_usa.html

这个话题也在这里详细讨论过......

将 JQuery 悬停与 HTML 图像地图结合使用 https://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map

我认为没有必要重复

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

Go to https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js 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); });;

您有一个可用的背景颜色版本...

谢谢 :)