how to create a floorplan w/ changing room colors

I have a property that I would like to show which units are available through a colored floorplan. I did this with a parking lot once and was able to slice up the whole parking lot into images for each space, this was ok, but seemed slow. My question is. could I use css  to highlight portions of an image to be yellow (available) or grey (occupied). or white really If I could just highlight the vacant units that would be great.
Really just looking for theory on how one might do this. I have a mySQL database, and some knowledge of PHP.
As you can see on the image the units aren't always square, so this could be a factor.

Another thought is to use the room labels as the indicator for occupancy. for example:
102 could be black text inside of a yellow box if it was vacant, or maybe no box, and just the text color is changed.

Thinking out loud here:
Could I have a <div> tag for the floorplan that had the image as a background image and then <divs> for each unit layered on top of that image? Can I draw a shapes other than squares using css.

Is this a lost cause?
floorplan.gif
LVL 2
adrake9Asked:
Who is Participating?
 
cyberstalkerConnect With a Mentor Commented:
It is possible to do this by using a background-image and stack elements with background-colors on top of them. However, since you can only make squares this can get messy quickly.

Another option is to use GD or imagemagick. With this you can alter the image with php before you send it to the client.

Another option, and the one i would prefer is to use canvas or SVG. Canvas is a way of scripting images in javascript. SVG is an XML format for images.
0
 
prokvkConnect With a Mentor Commented:
You cannot draw shapes other than rectangles via CSS. I guess the less difficult would be the way of drawing different texts, according to vacancy .. You can do so using PHP's image drawing capabilities (the GD library):

http://sk.php.net/manual/en/book.image.php

It's really quite simple. You'll have to code through the management of coordinates tho :P
0
 
adrake9Author Commented:
The image would be far more complex than the one I chose, it happens to be an old mansion that we rent out the offices. about 30 in total w/ 4 floors. If I did it w/ image draw or svg would this be done as the page loaded based on the query?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
cyberstalkerCommented:
That depends. You can make it so that the image is created on-the-fly dynamically. Nothing stops you from saving the image files you create however to use them on the next request.
0
 
qwerty021600Commented:
Using CSS for text is a better option with less of efforts and headache..
Define the class for each pattern and call it. As simple as that.
0
 
adrake9Author Commented:
cyberstalker -
sorry it took so long to get back. I'd like to wrap this up today. I've been nosing around on all of the recommended methods to try and determine what is best for my application. if I were to use canvas w/ javascript would I have complete browser compatability? are there any limitations to that particular method as well as the svf? the gd way seems like a good way to do it also, if I'm correct in thinking i could would load the background image first and then (based on the results of the database) draw the colored overlay. then merge the 2 and output the final version. This may be a different question but would it be able to overwrite the orginal file, so I'm not creating a new file every time a tell the database that a unit is vacant/occupied? Any help is appreciated.
-a
0
 
adrake9Author Commented:
any tutorials?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.