The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Help with a simple javascript web-app

I have attached a mockup illustrating the functionality that I am trying to achieve.

Essentially, I would like to allow the user to alter a simple image consisting of a few variable objects. Drop down boxes will allow the user to choose a color for two of the objects, and a shape for the other two objects. If possible, I would like the changes that the user makes to immediately appear (i.e. without page refresh).

I figure i will have to use pre-existing images for each of the objects (they are more complicated than the ones pictured). Naturally, I would like to create independent images for each each object that the code would automatically align properly, rather than creating a composite image for each combination of the four objects.

I would greatly appreciate it if someone could give describe the process I need to go through to achieve this. Perhaps some existing scripts that I might be able to use or similar functionality that youve come across. I'm fairly new to programming (I have some HTML/CSS experience but not a whole lot of JS), so the more detailed the better.