swa66 - 11:40 pm on Nov 27, 2012 (gmt 0)
If you just want to highlight some rooms, I'd go for the "CSS solution".
Essentially: make one background without the highlights as an image.
And then make one image with a transparent background (hence a png or so, jpg doesn't do transparent) with all the highlights on it (allow enough (empty) space between them.
Now you create the large background element and you load as many elements as you have highligts as children to it.
As far as CSS goes: give the background element the background image as a background, and you let it gain position by the property "position:relative".
The children: give position:absolute (relative to their parent), position them (top,left etc) and size them so they sit over the area you want to highlight. now give them the sprite image as background image and position the background.
This should work in all modern browsers without too much trouble.
If you can restrict yourself to true medern browsers (IE is the problem one - as aways), you have many more choices:
I've done some small work with SVG: it's relatively easy to generate drawings in it, it's xml, can integrate right into xhtml (namespace) - but well IE is retarded as usual.