php 更改 HTML <area> 标签的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9830009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background color of HTML <area> tag
提问by PHP Ferrari
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 mysqldb about each shape like:
我有一个包含 100 多个不同大小和尺寸的几何形状的图像，我在它上面使用了图像映射并将 id 分配给每个<area>like <area id="1">。我在mysqldb 中存储了关于每个形状的记录，例如：
--------------------
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.
现在我想根据他们的 id 为每个人设置背景颜色。
Here i paste HTML code for some area as whole page will increase my post:
在这里，我为某些区域粘贴 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>
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... :(
但不起作用... :(
回答by Baba
I think you should use a jquery imagemap plugin ... this is my favorite
我认为你应该使用 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
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
转到https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js
Can you see the following that maphilight accept fillColor: '000000' ;
你能看到 maphilight 接受 fillColor: '000000' 的以下内容吗？
You need to change fillOpacity to 1.0 to remove opacity
您需要将 fillOpacity 更改为 1.0 以删除不透明度
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 :)
谢谢 ：）
回答by Jukka K. Korpela
The areaelement just makes part of an image clickable. It does not affect rendering, and setting background properties on it probably has no effect.
该area元素只是使图像的一部分可点击。它不影响渲染，在其上设置背景属性可能没有效果。
The background would matter if the image contains transparent areas. In such a case, you could overlay (with CSS positioning) the image with another image of the same dimensions and containing the desired colors; this image would of course have a lower z-index value. But it would be simpler to put the backgrounds into the image directly (unless you wish to use different backgrounds in different situations).
如果图像包含透明区域，背景会很重要。在这种情况下，您可以用另一个具有相同尺寸并包含所需颜色的图像覆盖（使用 CSS 定位）图像；该图像当然具有较低的 z-index 值。但是直接将背景放入图像会更简单（除非您希望在不同情况下使用不同的背景）。
回答by Sergey Bogdanov
As Baba already said, you can trick area background highlighting with maphilight script.
正如 Baba 已经说过的，您可以使用 maphilight 脚本来欺骗区域背景突出显示。
Checkout an example here:
在此处查看示例：
davidlynch.org/projects/maphilight/docs/demo_features.html
davidlynch.org/projects/maphilight/docs/demo_features.html
Background will highlight somehow like this:
背景将以某种方式突出显示：
<script>
jQuery(document).ready(function() {
var data = $('#s1').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#s1').data('maphilight', data).trigger('alwaysOn.maphilight');
});
</script>
<img src="aaaa.jpg" usemap="#myMap" width="927" height="1106" />
<map name="myMap" id="myMap">
<area shape="rect" coords="219,800,314,819" id="s1" class="{fill:true,fillColor:'cd3333',fillOpacity:0.4,stroke:true,strokeColor:'003333',strokeOpacity:0.8,strokeWidth:1}" />
</map>
回答by Ben Ashton
Since you have a bunch of areas with id's corresponding to your tables, the only thing you really need to do is to create the CSS markup for each of those IDs. What you want to do is loop through your mysql table and "echo" the CSS markup somewhere between your head tags.
由于您有一堆区域的 id 对应于您的表，因此您真正需要做的唯一一件事就是为每个 ID 创建 CSS 标记。您想要做的是遍历您的 mysql 表并在您的 head 标签之间的某处“回显”CSS 标记。
1) Establish MySQL connection
1）建立MySQL连接
2) Create your select statement and initiate the while loop
2）创建您的选择语句并启动while循环
3) echo your css code.
3) 回显你的 css 代码。
<html>
<head>
<style type="text/css">
<?php
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
$result="SELECT `box_id`,`color_code` FROM `tablename`";
while ($row=mysql_fetch_assoc($result)) {
echo "#{$row['box_id']}\{background-color: {$row['color_code']}\}";
} mysql_close();
?>
</style>
</head>
<body></body>
</html>
