我有一张图像,其中有100多种大小和尺寸不同的几何形状,我在其上使用了图像映射,并为每个<area>
(如<area id="1">
)分配了ID。我将关于每个形状的记录存储在 mysql db中,如下所示:
--------------------
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插件...这是我的最爱
链接:http://archive.plugins.jquery.com/project/maphilight
演示:http://davidlynch.org/projects/maphilight/docs/demo_usa.html
这个主题也已经在这里详细讨论了.....
Using JQuery hover with HTML image map
我认为不需要重复
============================================================================================
转到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); });;
您有一个有效的背景色版本...
谢谢
:)