HTMLエリアマップを取ってdに変換する

Question

私は、占領されているフロアプランのテーブルを強調表示するためにrect座標を使用するエリアマップを持っています。占領されたテーブルは、それらの上にマウスを置くと、会社の名前を表示します。簡単に。

私がしたいことは、それらの座標を取って、各テーブルの座標にdivクラスを使用して、視覚的参照のためにそれより暗い不透明度を持つことです。幅と高さを計算するだけでなく、各テーブルの上端/左端の値を計算するのは簡単です。私はこの機能を追加するためにjQueryでこれらの値を取る方法を知りません。ここにコードスニペットがあります。あなたがイメージにコンテナを追加した場合

<img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /> 
<map name="fp" id="fp"> 
    <area shape="rect" coords="419,264,439,285" href="javascript://" title="Booth 73" alt="Booth 73" /> 
    <area shape="rect" coords="141,366,164,385" href="javascript://" title="Booth 62" alt="Booth 62" /> 
    <area shape="rect" coords="119,385,142,402" href="javascript://" title="Booth 64" alt="Booth 64" /> 
</map> 

Answer 1

イメージマップを気にしないでください。ても意味がありません：

<div class="map"> 
    <img src="images/floor_plan_2011_small.png" /> 
    <a style="top:419px; right:264px; height:20px; width:21px" href="javascript://" title="Booth 73" /> 
    <a style="top:141px; right:366px; height:23px; width:19px" href="javascript://" title="Booth 62" /> 
    <a style="top:119px; right:385px; height:23px; width:27px" href="javascript://" title="Booth 64" /> 
</div> 

あなたのスタイルシートにこれを追加すれば完了です：

.map { 
    position: relative; 
} 
.map a{ 
    position: absolute; 
    display: block; 
    background: black; 
    opacity: 0.1; 
} 
.map a:hover{ 
    opacity: 0.5; 
} 

Answer 2

は、JavaScript（またはCSS）を介して画像にオーバーレイを追加することができます。

<span id="img-span"><img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /></span> 
<map name="fp" id="fp"> 
    <area shape="rect" coords="419,264,439,285" href="#" title="Booth 73" alt="Booth 73" /> 
    <area shape="rect" coords="141,366,164,385" href="#" title="Booth 62" alt="Booth 62" /> 
    <area shape="rect" coords="119,385,142,402" href="#" title="Booth 64" alt="Booth 64" /> 
</map> 

JS--

//cache the span wrapper so it only has to be selected once 
var $imgSpan = $('#img-span'); 

//bind a mouseleave event handler to the image map so when the user moves the cursor away from the image map the overlays will be removed 
$('#fp').on('mouseleave', function() { 
    $imgSpan.children('.overlay').remove(); 

//bind a mouseenter event handler to the image map area tags to create an overlay 
}).children('area').on('mouseenter', function() { 
    var $this = $(this); 
    $imgSpan.children('.overlay').remove() 
      .prepend('<div class="overlay" style="top: ' + $this.css('top') + '; left: ' + $this.css('left') + '; width: ' + $this.css('width') + '; height: ' + $this.css('height') + ';"></div>'); 
}); 

CSS- -

#img-span .overlay { 
    position : absolute; 
    opacity : 0.6; 
    filter : alpha(opacity=60); 
    z-index : 1000; 
} 

注：はjQuery 1.7の新機能で、この場合は.bind()と同じです。

また-注：私は、今までの画像がそう、私は彼らのtop/left/width/heightスタイルプロパティを取得することが可能であることがわからないんだけど、そうでない場合は、あなただけのcoords属性（$(this).attr('coords')）を取得することができますマッピングし使用していませんそれを適切な情報に解析します。