Search code examples
htmlcssimagemap

Change background color HTML Area coordinates


I have an image of a china cabinet.

Using an image map I can plot the points and make the hrefs:

<area id="vasetop" alt="" title="Vase on Top" href="#" onClick="reply_click(this)" shape="rect" coords="276,27,379,96" style="outline:none;" target="_self"  />

I have database with all the item names and each one has a value of 0 if its available and 1 if it is not available.

What I would like to do is if say:

vasetop has a value of 1 I would like to remove it somehow.

My code would look something like

$result = mysqli_query($con,"SELECT * FROM stuff where status='1'");
    while($row = mysqli_fetch_array($result)) {
        if ($row['items'] == "vasetop"){
            <area show black box at these coords="276,27,379,96" />
        }
        else {
            <area id="vasetop" alt="" title="Vase on Top" href="#" onClick="reply_click(this)" shape="rect" coords="276,27,379,96" style="outline:none;" target="_self"  />
        }
}

Something close to that.

Is there anyway to can set the background color of coords in html?

What i realy want is some code that would do the following.

<div coords="276,27,379,96" style="background-color: #FFFFFF;">

Solution

  • You may place absolutely positioned div on top of your map, something like:

    <div style="position:absolute; 
    top:27px; 
    left:276px; 
    width:103px; /*379-276*/
    height:69px; /* 96-27 */
    background:#fff;"></div>
    

    But it is easy with rectangular shape only, doing such thing with circle and polygon is a lot trickier...