Question

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.

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>

Answer 1

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