Image Map Area Manipulation

HTML & CSS
1

Hi, I have a large map that I have created created an image map with 20+ area definitions with links. I have been fooling around with adding a class to each area and attempting to change the properties to have a colored/transparent overlay appear within the area but I cannot get anything to work. Any tips?

CSS Code


/* CSS Document */
#no_items { background-color: #0F0; }
#open_items { background-color: #F00; }

HTML Code


<p><img src="/template/v2/images/pamf/Level2West3.png" width="2350" height="1328" usemap="#Map" border="0" />
  <map name="Map" id="Map">
    <area shape="rect" coords="471,621,570,707" href="/rcl/room.php?room_id=639" alt="W276 Exam" id="no_items" />
    <area shape="rect" coords="470,712,570,799" href="/rcl/room.php?room_id=641" alt="W278 Exam" id="no_items" />
    <area shape="rect" coords="470,802,570,889" href="/rcl/room.php?room_id=643" alt="W280 Exam" id="no_items" />
    <area shape="rect" coords="469,893,569,981" href="/rcl/room.php?room_id=645" alt="W282 Exam" id="no_items" />
    <area shape="rect" coords="628,617,728,709" href="/rcl/room.php?room_id=638" alt="W275 Exam" id="open_items" />
    <area shape="rect" coords="628,712,729,799" href="/rcl/room.php?room_id=640" alt="W277 Exam" id="open_items" />
    <area shape="rect" coords="628,802,729,889" href="/rcl/room.php?room_id=642" alt="W279 Exam" id="open_items" />
    <area shape="rect" coords="628,893,733,981" href="/rcl/room.php?room_id=644" alt="W281 Exam" id="open_items" />
  </map>
</p>
2

I wouldn’t use an image map, actually, but just html boxes placed where you need them, with a color on hover. Maybe a screen shot would make it easier to help, though, as that code does nothing in my browser.

Remember that you can only use an ID once per page, so use classes instead where there are multiple examples. :slight_smile:

3

The very first thing you need to do is change id=“… to class=”… because id’s must be unique on a web page.

If pain persists, post back :slight_smile:

4

I changed the id back to class with no luck.

Ralph, I was going to use HTML boxes but I will have a majority of the image map requiring poly line shapes (not always rectangular as the example shows). Basically what I am trying to accomplish is that I have written a PHP script and I would like to visually display the “status” of a room by taking an overall architectural floor plan for construction, creating an area over each room (so there will be +/- 50 rooms) and having a “mask” over the room with a specific color for each status. The PHP side is the easy part but I’ve never worked with image manipulation so this is the new part for me. I greatly appreciate the quick responses!

Thanks, Chris

5

You can still do this with CSS and background images, but you might also consider just using something like this:

http://newsignature.github.com/us-map/

6

I don’t know if you’re room statuses come from a database or not but this quick and basic example will hopefully get you started.

I have attached the image the example uses. Each coloured square represents a room but you can make each room whatever shape you like with the coords attributes.

I then have a div showing the status of each room. Each of the divs is positioned roughly in the centre of each room. You will have to adjust the top and left values of each div to suit the location of your rooms on the floor plan. But you would have to do this only once since I assume the room sizes and locations will not change.

Then when you click on a room, the status div for that room is displayed over the room.

Hopefully you will get the jist of what I have done.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #imgMapContainer {
                position: relative;
            }
            #rm1Status {
                position: absolute;
                top: 50px;
                left: 20px;
                display: none;
            }
            #rm2Status {
                position: absolute;
                top: 50px;
                left: 120px;
                display: none;
            }
            #rm3Status {
                position: absolute;
                top: 150px;
                left: 20px;
                display: none;
            }
            #rm4Status {
                position: absolute;
                top: 150px;
                left: 120px;
                display: none;
            }
        </style>
        <script type="text/javascript">
            function doThis(str){
                document.getElementById(str+'Status').style.display='block';
            }
        </script>
    </head>
    <body>
        <div id="imgMapContainer">
            <img src="imageMap.gif" usemap="#Map" alt="" class="no_items" />
            <div id="rm1Status">Booked</div>
            <div id="rm2Status">Free</div>
            <div id="rm3Status">Free</div>
            <div id="rm4Status">Booked</div>
        </div>
        <map name="Map" id="Map">
            <area id="rm1" shape="rect" coords="0,0,100,100" href="" onclick="doThis(this.id);return false;" />
            <area id="rm2" shape="rect" coords="100,0,200,100" href="" onclick="doThis(this.id);return false;" />
            <area id="rm3" shape="rect" coords="0,100,100,200" href="" onclick="doThis(this.id);return false;" />
            <area id="rm4" shape="rect" coords="100,100,200,200" href="" onclick="doThis(this.id);return false;" />
        </map>
    </body>
</html>
7

or if you want something more fancy, there are lots of options on the Internet.

8

Hi,

I tried to do this a while ago with just css and html and could not get a cross browsers solution so JS seems the best option if you want tightly hugging areas.

For interests sake only here is the old demo but note that I have only made the 2 countries mentioned work but it would work for the whole map if co-ordinates were provided. Unfortunately as browser support is sparse its of no use other than for interests sake.