更改 HTML <area> 元素的背景颜色

Question

更改 HTML <area> 元素的背景颜色

6

我有一张图片，上面有100多个不同大小和尺寸的几何形状。我使用了图像映射，并为每个 <area> 分配了ID，例如 <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;" />

但是不起作用... :(

- PHP Ferrari

请发布HTML标记和生成标记的PHP代码。 - Michael Berkowski

为了使HTML有效，id必须以字母a-z或A-Z开头。 - Surreal Dreams

无论您是使用ID处理数据库表还是根据特定ID增加或减少行，都可以将数字值用作元素ID。 - PHP Ferrari

2

据我所知，区域标签没有可视样式，因为浏览器不显示区域。 - Surreal Dreams

1

正确：您无法为它们设置样式。有一个jQuery插件试图解决这个问题：http://davidlynch.org/projects/maphilight/docs/ - Diodeus - James MacFarlane

你也可以使用定位锚点来实现一些效果，就像这个例子http://www.cssplay.co.uk/menu/imap.html。 - AndrewR

4个回答

3

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

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

- Jukka K. Korpela

1

你能否用任何例子来演示一下？ - Tanveer

3

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

- Sergey Bogdanov

1

由于您有许多与表对应的ID区域，所以您真正需要做的只是为每个ID创建CSS标记。您要做的是循环遍历MYSQL表并在head标签之间的某个地方“echo” CSS标记。

1）建立MySQL连接

2）创建您的选择语句并启动while循环

3）echo您的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>

- Ben Ashton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Baba · Accepted Answer

我认为你应该使用一个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); });;

您有一个可用的背景颜色版本。如果您想要在不同的页面上使用不同的背景颜色，您可以为每个页面创建单独的样式表。

谢谢 :)