获取HTML区域地图并转换为d [英] Take HTML area map and convert to d

问题描述

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

I have an area map using rect coordinates to highlight tables of a floor plan that are occupied. Occupied tables will, when you hover over them, display the name of the company. Easy enough.

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

What I want to do is take those coordinates and, using a div class for each table's coordinate, have a darker opacity over it for visual reference. It's easy enough to calculate the top/left value for each table as well as calculating the width and height. I just don't know how to take those values in jQuery to add this feature. Here's a code snippet.

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

推荐答案

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

Don't bother with an image map. There's no point:

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

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

Add this to your stylesheet, and you're done:

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

这篇关于获取HTML区域地图并转换为d的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！