adrake9
asked on
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
Define the class for each pattern and call it. As simple as that.
ASKER
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
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
ASKER
any tutorials?
ASKER