5

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.

animuson
  • 53,861
  • 28
  • 137
  • 147
Andrew Backes
  • 1,884
  • 4
  • 21
  • 37

2 Answers2

2

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/

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • I think this runs into the same issue of having to access my database and change room colors on page load...any way to do this server side? – Andrew Backes Jul 18 '12 at 21:25
  • There is certainly a way to do it server side, but it would probably require a great deal of work using GDI+ or the like to actually draw images. It would also require end-users to download a completely new image every time they accessed the page, which from the sound of it could be a big image. You trade one problem for another. Javascript is pretty darn fast these days, there's no reason to anticipate a performance problem doing this on the client. You don't need to make a special request to the database, just pass the data on page load as JSON, and have the client do the rendering using it. – Jamie Treworgy Jul 18 '12 at 21:31
  • Updated my answer with an example of how you could use data passed from the server. – Jamie Treworgy Jul 18 '12 at 21:47
  • I apologize but could you explain a little more how I am getting the data from my server? I am using SQL Server 2008. On page load (in the code behind), I would like to load the reserved rooms from my database and possibly store them in a dataset? Then loop through the dataset and color in the hotspot accordingly. – Andrew Backes Jul 19 '12 at 20:18
  • 1
    I don't know how you normally get data from your server, but in whatever code renders the page itself, you ouput some HTML that contains the data. Did you look at the fiddle I posted? All you have to do is get your server to generate some content that gets sent with the page. In my example, that content is stored in a `` block. How you do that is totally up to you, if you're using ASP.NET webforms, then just add an `` control and set it's `Text` property to ``. – Jamie Treworgy Jul 19 '12 at 20:46
  • I have downloaded the jquery.imagemapster.js and am trying to mimic your fiddle example (copying it exactly into visual studio 2008) but I can't seem to get it to work? Do I need something more than jquery.imagemapster.js? And by it not working, I mean it isn't changing the color of the states on page load. – Andrew Backes Jul 19 '12 at 21:35
  • How you integrate this into your project is a whole different kettle of fish... I would have to be a mind reader to know what's not working for you; I don't even know what technology you are using on the back end. The example shows you the javascript needed to read in some data from the page markup in a `script` block and pass it to ImageMapster. You're still going to have to do a bit more than just copy and paste it into your project to make it work. – Jamie Treworgy Jul 19 '12 at 22:00
0

HTML5 has procedural drawing via canvas

Sam Axe
  • 33,313
  • 9
  • 55
  • 89
  • Great answer, but won't I have an issue drawing if I need to do it from server-side not client side? I must be able to access my database, so on pageload, color the rooms that are reserved. – Andrew Backes Jul 18 '12 at 20:25
  • Oh, then using gdi+ would be the way to go. will post an example in the morning if noone else gets to it before me – Sam Axe Jul 19 '12 at 05:04