更改HTML< area>的背景颜色标签 [英] Change background color of HTML <area> tag

问题描述

我有一个包含100多个不同大小和尺寸的几何图形的图像，我使用了它的图像映射，并为每个< area> 赋予id，例如< area id =1> 。我在 mysql db中存储了有关每种形状的记录：

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

现在我想为每个id设置背景颜色。

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

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

我也试过：

 < area id =1shape =polycoords =604,140,​​657,140,​​677,160,677,234,605,234style =background-color：＃00FFEE; /> 
  

但不起作用...：（

解决方案

我认为你应该使用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以消除不透明度

您需要做的就是通过编辑下面的代码而不用鼠标悬停来完成工作，并用您的代码替换

  $（$ mouse）
 .bind（'mouseout.maphilight'）。 ，函数（e）{clear_canvas（canvas）; }）;; 
  

你有一个工作的背景色版本...

感谢
：）

I have an image with more than 100 geometrical shapes with different size and dimensions, i used image mapping over it and assign id to each <area> like <area id="1">. I stored records in mysql db about each shape like:

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

now i want to set backgroung-color for each with respect to their ids.

Here i paste HTML code for some area as whole page will increase my post:

<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>

I also tried:

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

but not work... :(

解决方案

I think you should use a jquery imagemap plugin ... this is my favorite

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

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

This topic has also been discussed in detail here .....

Using JQuery hover with HTML image map

I don't think there is need for duplication

============= Update on your comments ===================

Go to https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js

Can you see the following that maphilight accept fillColor: '000000' ;

You need to change fillOpacity to 1.0 to remove opacity

All you need to do is make with work without mouse over by editing the code below and replace with yours

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

You have a working Background Color version ...

Thanks :)

这篇关于更改HTML< area>的背景颜色标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！