改變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>標籤

回答

相關問題