I am not the best web designer and still learning.

I want to display a selection of images so customers can choose the colours of products and when chosen will display the correct image.

Basically I want to overlay a number of options so if the want a car in red with yellow viper stripes it would show those 2 images. The viper stripes would be on top of the red car image. Then they could change the colours of the stripes or the cars and the images would change accordingly.

Is this possible in an easy to understand manor!!!

To get an idea of my products look at www.childrens-theme-beds.co.uk

Thanks in advance for any help

.

How many combinations are available
with each product ?

Radio

.

each bed would be a set of selections and depends on the bed.

For instance a car bed would be the base colour, say 5 to choose from.

Then an additional option of viper stripes. again say 5 different colours and maybe racing stickers as a further group. I would need to have each 'group on top of each other and depending on which one is selected depends on wether it is visible or not.

Just need an idea of the syntax to use. Only done basic stuf and the mouse over option of the special FX. Not done any scripting before.

What you want should be possible with a kind of mouseover effect:

Have all objects invisible at first (Hide while/after loading)

Selecting the bed color shows one of the possible bases

Selecting the stripes superimposes one of the stripe sets. The stripes will need to have a transparent background to allow the base color to show through

Ditto for the racing stickers.

This means that you will have five bases, five stripe sets and five stickers all piled on top of each other. You will need to be super-organized, as fifteen images in a stack will otherwise be difficult to manage.

I suggest use the onChange event of the selection list as described in this thread. On the Javascript side, check out my page on slideshows. In particular look at the code in the file slideshows.js as that has image hide and show routines that you could trigger from the onChange selection list events.

quote:

Originally posted by bluewell:
I am not the best web designer and still learning.

I want to display a selection of images so customers can choose the colours of products and when chosen will display the correct image.

Basically I want to overlay a number of options so if the want a car in red with yellow viper stripes it would show those 2 images. The viper stripes would be on top of the red car image. Then they could change the colours of the stripes or the cars and the images would change accordingly.

Is this possible in an easy to understand manor!!!

To get an idea of my products look at www.childrens-theme-beds.co.uk

Thanks in advance for any help

Many of us are in the same boat as you .... and 'learning' is what life is all about, so "let's get to it!" :-)

As others have said, it is perfectly feasible to achieve what you want, though your page size may end up pretty big. However, most of the UK is now on broadband so it shouldn't be a problem ... unless visitors are with BT which is currently cutting download speeds at prime times!! (What?!)

I just hope that the website you linked to is not your own ... as it has numerous flaws which will not aid business/sales IMHO - especially in the UK market. If it is your site then please PM me and I will give a few tips which might help ... even though you appear to be a Kentish Man (not an import?!)... and I'm a Man of Kent, LOL! (Pistols at dawn, ha ha!)

mccifa ;-)

Is this what you are trying to achieve?

I have tested it on IE, Firefox, Chrome, Opera and Safari, and it works fine on all.

And mccifa, the page size is only about 60KB which includes 15 images, 15 links, and 30 applications of Special FX

Brilliant, Postyr! :-)

mccifa

Bluewell,

When you view my example, I can hear you saying “That’s all very well, but how do I know what options the visitor has chosen”.

Well, I have pre-empted your question, and provided an answer.

I have added a form to my example that contains the user’s information to place an order.

Included in that form are three extra text boxes that are populated with the user’s choices, even as they change them.

The text boxes are read only, and cannot be edited, added to or deleted by the user. They can only be changed by selecting different design options.

When the user clicks the “Submit” or “Order” button, your form-mail script can also retrieve the values of these three text boxes along with their contact details.

That way, you will know exactly what Base, Stripe and Sticker your client wants.

To view my updated example, please click here

Terry

That looks quite good and the type of effect I am after.

Now its all very good trawling through the html. Quick question. Is it possible for me to download the sitespinner file so I can see how to do it on site spinner so I can replicate and move around easily etc.

Also please let me know of any errors and I will look at them asap. Yes it is my website and do not get enough time to look at it and play with it to be honest. Loads of things to do as yet! as well as integrate with my shopping cart.

Yes, you can download the IMS file by clickeing here

If you have any questions, please don't hesitate to ask.

Terry

Bluewell,

I just had a thought. If you download and open the IMS file, you will not be able to see how I have referenced the images, as they will not be on your local machine.

You can download the images in a zip file from here

Unzip them into a folder on your computer. Open the IMS project and select the top image (the top image is named stick5.gif).

Open the Geometry Editor, and select the Options tab.

Click on the button “New Dir” which will open the Change Image Directory dialogue box.

The top section will show the old directory for the images (from my computer). In the new directory below that, navigate to the folder where you placed the unzipped images and open that. Select the image named “stick5.gif” (which is the name of the top image) and click Open.

Click OK and you will get a warning that this will change the directory for all images., which is what we want, so click Yes.

You will get a message saying that 16 images have been changed. The 16th image is the blank white image you see when the site is first opened.