获取HTML区域地图并转换为d

Question

我有一张面积图，使用直角坐标来突出显示楼层平面图中已占用的表格。当您将鼠标悬停在已占用的表上时，这些表将显示公司的名称。很简单。

我想做的是获取这些坐标，并为每个表的坐标使用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;
}

注意：.on()在jQuery 1.7中是新的，在本例中与.bind()相同。

另外请注意：我从来没有使用过图像映射，所以我不确定是否可以获得它们的top/left/width/height样式的属性，如果不能，那么您可以只获取coords属性（$(this).attr('coords')）并将其解析为正确的信息。