I'm wanting to create a fairly simple Configurator script that will make use of a static image, with lots of PNG's that overlap the image. When certain options are checked, the image needs to update with the relevant image.

For example, there will be a base image, lets call that base-image.jpg.

On base-image.jpg, I will overlay a couple of different options. As an example:

Circles:

      - Red Circle 

      - Blue Circle

      - Green Circle

Squares:

      - Black Square

      - Blue Square

      - Pink Square

and so on..

The user then will have a two drop down menus. Circles and Squares. Depending on what options they choose, the image needs to show the relevant option. Chances are, there will be maybe 8 different dropdowns with 5-10 different options inside each one that will affect the base image.

My logic was that I'd be able to line all these up using CSS and then set them to display:none. Then use JQuery to change this to visible if it was selected. I don't want to use Flash for obvious reasons but want to make this as sleek looking as possible!

Would this be correct? Does anyone have any better ideas on how this could be done and does anyone know of any plugins / systems out there already to do this?

Thank you in advance!

Kind regards,

Lewis