改变HTML的背景颜色<area>标签

我有一个图像有超过100个不同大小和尺寸的几何形状，我用它的图像映射，并为每个<area>像<area id="1">分配ID。我保存记录MySQL的分贝约像每个形状：改变HTML的背景颜色<area>标签

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

现在我想设置backgroung颜色为每个相对于它们的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;" />

但不行... :(

来源

2012-03-22 PHP Ferrari

请张贴的HTML标记和 – 2012-03-22 20:31:31

确定在这里生成的标记的PHP我张贴 – 2012-03-22 20:32:28

为了验证HTML，标识以字母，az或AZ开头。 – 2012-03-22 20:35:48

由于你有很多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>

来源

2012-03-22 20:43:12

area元素只是使图像的一部分可点击。它不会影响渲染，并且在其上设置背景属性可能不起作用。

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

来源

2012-03-22 20:43:36

你能举例说明吗？ – Tanveer 2012-08-28 11:17:49

我认为你应该使用一个jQuery插件图像映射...这是我最喜欢的

链接：http://archive.plugins.jquery.com/project/maphilight

演示：http://davidlynch.org/projects/maphilight/docs/demo_usa.html

本主题也已在这里详细讨论... ..

Using JQuery hover with HTML image map

我不认为有必要对DUPLIC通货膨胀

您的意见===================

=============更新

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

你有工作背景颜色版本...

谢谢 :)

来源

2012-03-22 20:44:44 Baba

我想你不明白我的问题。请再次阅读我的问题再次.. 我想为设置背景颜色不高亮，我想要应用纯色背景颜色.. – 2012-03-22 20:56:29

它不工作的原因，因为它的图像不是HTML，你可以设置这样的背景..我问你应该使用一个插件..它可以很容易地绘制坐标，并用你的颜色取代它，就像现在突出显示的方式 – Baba 2012-03-22 21:12:36

正如巴巴已经说过，你可以用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>

来源

2014-01-08 12:25:17

改变HTML的背景颜色<area>标签

回答

相关问题