I want to have a main image in place and when you click on 1 of the 3 frame options the frame changes showing a preview. Also I would like the add to cart button change its code to add the correct item as well.
Can anyone help me through this?
The way I would go about it would be to have each clickable option as a radio button (rather than a normal form button or link), and then using the CSS3 :checked pseudo you could shift the background image of an element using CSS sprites to move from one image to another (depending on the radio option selected). It avoids the need for complex scripting and should work cross-browser, you’ll just need a bit of positioning savvy to order the image container and ensure things work in IE.
PS: As for the add to cart option, you’ll need a script for that - unless you’re producing your own e-commerce system (very complex).
I actually got it working last Friday, sorry I didn’t post it…
It was rather easy, I used getElementById and it worked out.