Non-traditional input using CSS sprites and JavaScript: opinions sought

Question

My client is very invested in using a bunch of non-traditional inputs in a form we are developing for him. The image below represents various states of the interface with the last indicated it is disabled in the current context. The end users will be trained in how to interact with the inputs.

alt text http://www.nolaflash.com/interface.gif

My idea is that we will develop an image map representing the clickable zones of the image and let the onclick event set a hidden field and change the CSS for the element to move the background sprite to the appropriate coordinates.

What do folks think of this? Obvious flaws other than folks with JavaScript disabled?

I want the end solution to be iPhone/other device friendly.

Your thoughts will be appreciated.

Answer 1

Here is my solution using CSS Sprites and JS

http://egolfplan.com/testform.html

Answer 2

let the onclick event set a hidden field and change the CSS for the element to move the background sprite

sounds reasonable