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

我有一个使用rect坐标的区域地图来突出显示被占用的平面图的表格。 当您将鼠标hover在它们上方时，占用的表格将显示公司的名称。 很容易。

我想要做的是获取这些坐标，并使用每个表的坐标的div类，在它上面具有更暗的不透明度以供视觉参考。 很容易计算每个表的顶部/左侧值以及计算宽度和高度。 我只是不知道如何在jQuery中使用这些值来添加此function。 这是一段代码片段。

Answer 1

不要打扰图像映射。 毫无意义：

将其添加到样式表中，您就完成了：

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

Answer 2

如果您向图像添加容器，则可以通过JavaScript（或CSS）将叠加层附加到图像：

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('
'); }); 

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') ）并将其解析为适当的信息。