[英]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.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
这个话题也在这里详细讨论过......
我认为不需要重复
=============您的评论更新===================
转到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); });;
你有一个工作背景颜色版本......
谢谢 ：）
area元素只是使图像的一部分可点击。 它不会影响渲染，并且在其上设置背景属性可能没有任何效果。
如果图像包含透明区域，背景将很重要。 在这种情况下，您可以使用相同尺寸的另一个图像覆盖（使用CSS定位）图像并包含所需的颜色; 该图像当然具有较低的z指数值。 但是将背景直接放入图像会更简单（除非您希望在不同情况下使用不同的背景）。
正如巴巴已经说过的那样，你可以使用maphilight脚本欺骗区域背景突出显示。
在这里查看示例：
davidlynch.org/projects/maphilight/docs/demo_features.html
背景将以某种方式突出显示如下：
<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>
由于你有一堆id与你的表对应的区域，你真正需要做的唯一事情是为每个ID创建CSS标记。 你想要做的是循环你的mysql表并“回显”头标记之间的CSS标记。
1）建立MySQL连接
2）创建select语句并启动while循环
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>
根据背景图像的主要颜色（在文本区域中）更改字体颜色
[英]Change font color based on the background image dominating color(in the text area)
如何使用 AJAX Post Request 更改 HTML DOC 的背景颜色：
[英]How to change Background color of HTML DOC using AJAX Post Request:
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.