How to color asp hotspots on an imagemap?

Question

I have an image (the image is a floor plan for a building), and the image contains various rooms that can either be open or reserved. I have used an Imagemap and hotspots to map out the coordinates of the rooms and I am handling the onclick events to do what I need them to accomplish. The problem is, how can I color the coordinates of the hotspot once the room is reserved? I keep track of reserved rooms in my database, so it isn't a problem knowing which room is reserved, but the problem is there is no color property for hotspots. What's the best way to go about this? Javascript?

I know I can swap images on click and whatnot, but there are hundreds of rooms, and it would be a waste of time to have that many images for every possibility of reserved/not reserved rooms.

Answer 1

You don't say jQuery but it sure would be easier than starting from scratch. jQuery plugin to do this:

http://www.outsharked.com/imagemapster/

Your database access issue is a bit of a red herring. There's no reason the server can't pass the data needed as part of the markup when the page is loaded, e.g.

<script type="application/json" id="map-data">
  [1,2,10,33]
</script>

.. or whatever format/structure/data types are useful to you. You don't have to use a script block - you could put it in a hidden div, it really doesn't matter. Nor do you have to use JSON, this is just convenient. Then you can use that data as inputs to something like ImageMapster to highlight the areas needed. Just hide the image until you're done configuring it, and as far as the end user will ever see, that's how it was loaded from the server.

Example of taking some data from the markup, and using it to set hotspots on an imagemap using ImageMapster:

http://jsfiddle.net/jamietre/hD6bM/