HTMLの背景色を変更します<area>タグ

Question

私は100を超える幾何学的形状を持つ画像をさまざまなサイズと大きさで持っています。画像マッピングを使用して<area>のようなIDを<area id="1">に割り当てます。今私は、そのIDに対する各用backgroung色を設定したい

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

：私のような各形状についてmysqlのデシベルでレコードを保存します。私も試してみました

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

：ここ

は、私は私のポスト増加し、全体のページなど、いくつかのエリアのHTMLコードを貼り付け

<area id="1" shape="poly" coords="604,140,657,140,677,160,677,234,605,234" style="background-color:#00FFEE;" /> 

ではなく、仕事を... :(

Answer 1

あなたのテーブルに対応するIDを持つ領域がたくさんあるので、実際に行う必要があるのは、それらのIDごとにCSSマークアップを作成することだけです。あなたがしたいことは、mysqlテーブルをループしてCSSマークアップを頭のタグの間のどこかに "エコー"します。

1））

2 MySQLの接続

を確立し、あなたのSELECT文を作成し、

3）はあなたのCSSコードをエコーwhileループを開始します。

Answer 2

area要素は、画像の一部をクリックできるようにするだけです。レンダリングには影響しません。背景のプロパティを設定しても効果はありません。

画像に透明領域が含まれている場合は、背景が重要です。そのような場合は、イメージを同じ寸法の別のイメージでオーバーレイし（CSS配置で）、目的の色を含むことができます。もちろん、この画像はZ-インデックス値が低くなります。しかし、異なる状況で異なる背景を使いたい場合を除き、背景を直接画像に入れる方が簡単です。

Answer 3

私は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); });; 

と交換している

を不透明

を削除するにはありがとう :)

Answer 4

馬場がすでに言ったように、あなたは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>