更改 HTML <area> 标签的背景颜色答案

【问题标题】：Change background color of HTML <area> tag更改 HTML <area> 标签的背景颜色
【发布时间】：2012-04-07 11:17:34
【问题描述】：

我有一张包含 100 多种不同大小和尺寸的几何形状的图像，我在其上使用了图像映射并将 id 分配给每个 <area>，例如 <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;" />

但不工作... :(

【问题讨论】：

请发布 HTML 标记和生成标记的 PHP
要验证 HTML，id 以字母 a-z 或 A-Z 开头。
无论您是使用 ids 来处理 db 表还是根据特定 id 增加或减少行数，都可以使用数值作为元素 id。
另外，据我所知，区域标签没有视觉样式，因为浏览器不显示区域。
TRUE：您无法设置它们的样式。有一个 jQuery 插件试图解决这个问题：davidlynch.org/projects/maphilight/docs

标签： php mysql html css

【解决方案1】：

由于您有一堆区域的 id 对应于您的表格，因此您真正需要做的就是为每个 ID 创建 CSS 标记。您要做的是遍历您的 mysql 表并在您的 head 标签之间的某处“回显” 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>

【讨论】：

【解决方案2】：

area 元素只是使图像的一部分可点击。它不影响渲染，在其上设置背景属性可能没有效果。

如果图像包含透明区域，则背景很重要。在这种情况下，您可以用另一个相同尺寸并包含所需颜色的图像覆盖（使用 CSS 定位）图像；该图像当然具有较低的 z-index 值。但是将背景直接放入图像中会更简单（除非您希望在不同的情况下使用不同的背景）。

【讨论】：

你能举个例子吗？

【解决方案3】：

我认为你应该使用 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

我认为不需要重复

============= 更新您的 cmets ====================

转到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); });;

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

谢谢 :)

【讨论】：

我想你不明白我的问题。请再次阅读我的问题.. 我想为设置背景颜色而不是突出显示，我想应用纯色背景颜色..
它不起作用的原因是因为它是图像而不是 html，你可以像这样设置背景..我问你应该使用插件..它可以轻松绘制坐标并将其替换为你的颜色就像现在突出显示的工作方式一样

【解决方案4】：

正如 Baba 已经说过的，您可以使用 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>

【讨论】：