Hello Firends,

I am developing a fashion website where visitors can come and select branded T-Shirts. Visitors will have to choose Man, Woman or Kid Avatar in order to check out the display of the Clothes.

What I need is that, on the COLOUR CATEGORY, if the visitor click on RED, the cloth on the Avatar should change to RED (immediately without refreshing the page). If the visitor select a pattern under DESIGN CATEGORY, the design on the Avatar should change to the selected design. Other categories are Size, Quotes on Shirt, U/V Neck Category etc.

Everything selected should show on the Avatar. Then the visitor can click on SUBMIT TO CART, and all the visitor have selected will be submitted to the cart.

Please which script or software can do this or how do I go about it?

Thanks a lot.

I would use jquery and either hover or on method. The later is preferred since it gives more controls over event handling.

Thanks broj1, i'll try it and get back to you soonest.

OK. Try to write some code and if doesn't work, post it here and we will have a look at it.

The image with the ten models in is a 'mask' which is transparent in the 'dress' area. Clicking on one of the fabric samples loads it into the background behind the mask so it shows through in the dress area.
The customer(website owner) buys a new fabric, takes a photo then uses the website to upload and create the new images needed for the sample and background and enter into database.
I use jQuery to handle the selection and background image switching, etc.
You may not need this level of complication if your colors are pre-determined.

Wow nauticalmac thanks.
I have checked the site and its what I want. just that there are more thing to display on the image, things like the top (shirt), the design on the sirt, trouser/shot.

But with this your explaination, how can i mask a single image to display more than one dress? Also pls how can i get the scripts necessary for this.

Thanks all

Thanks nauticalmac. Let me reach my client. I will contact you on it.