web-dev-qa-db-ja.com

HTML <area>要素に背景色を設定しますか？

HTML <area>要素の背景色を設定する方法はありますか？マップの特定のセクションにカーソルを合わせるとツールチップがポップアップするイメージマップを作成しています。<area>要素の背景色を設定できれば便利です。画像のどこにあるかが分かります。

Background-colorとborderの両方を試しましたが、どちらも効果がありません。<area>要素は「見えない」ままです。これは、<area>が自己終了タグであり、実際にはディメンションがないためと考えています。しかし、高さと幅を強制しても効果がありませんでした。

htmlborderbackground-colorimagemaparea
16
daGUY

エリアの代わりにdiv(set postition:absolute)を使用できます

2
irockman

それは可能ではないようです。

このjQueryプラグインを調べてみてください。

http://plugins.jquery.com/project/maphilight

次に例を示します。

http://davidlynch.org/js/maphilight/docs/demo_usa.html#

3
Jason Gennaro
<script>
 $(function() 
 {
      $('.map').maphilight({
      fillColor: '008800'
 });
 var data = $('#id').data('maphilight') || {};

 data.alwaysOn = !data.alwaysOn;
 $('#id').data('maphilight', data).trigger('alwaysOn.maphilight');
 });
1
Akhilesh Kumar

この機能を提供する2つのライブラリがあります。どちらも同じように機能します。ブラウザがCanvasをサポートしているかどうかを確認し、サポートしている場合はCanvasシェイプを描画し、サポートしていない場合（つまりInternet Explorer）はVMLを描画します。

  • Maphilight上記のように（ 2013で機能するリンク ）
    • 基本的なグループ化も含まれます
  • ImageMapster （jQueryプラグイン）これに加えて、他のイメージマップ機能を提供します。
    • 画像マップのスケーリング（レスポンシブ画像で使用するためなど）
    • エリア内の代替画像に切り替える
    • 簡単なツールチップとリストとのイベントバインディング
    • グループ化

かなり良い ImageMapsterのデモ サイトがいくつかあります。

0
user56reinstatemonica8