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

如果您向图像添加容器，则可以通过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')）并将其解析为正确的信息。

Answer 2

不要打扰图像映射。没有意义：

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

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

2 个答案: