Make image map selectable with javascript or jQuery?

I have requirements to make a image map of seats in a amphitheatre selectable, much like a check box, with 3 states: select开发者_JS百科ed, unselected, and disabled. I wish to know if there is a way to do this so that selected images would become serialised for database submission?

I have it working with just checkboxes, but I can not use them for the client (they like pretty things :p)

Check out my jquery plugin ImageMapster. It does exactly this: allows you to identify areas of an image map that should be highlighted and can maintain state. There are a lot of options for rendering the highlights, including using a second image as the source for the highlighted areas, as well as for identifying areas that should be ignored or fixed in a certain state. In the USA map example on that link:

• Washington State is permanently selected & does not respond to mouseover events
• Oregon is permanently deselected & does not respond to mouseover events (this is just as if it was not part of the map - but options can be changed on the fly so there might be reasons to include areas in the map but turn them off).
• Alaska is unselectable (but does respond to mouseover events)

You can also assign options that determine how each area highlight should appear on a per-area basis.

The full documentation is on github.

You only need a single alternate image if you use the "alternate image" option for the highlights, the plug-in draws the content from the same area of a 2nd image to create each highlight.

It works with any HTML image map as the data source.

Why don't you just use the jquery UI buttons?

http://jqueryui.com/demos/button/#icons

That probably should help and you don't have to recode anything.