remote image change

[cway]

Does anybody know how to do this:
click on a color swatch and a remote image changes.
like the car websites do.



I don't know if this can be done with only css or if there needs to be javascript, too.

Thanks!
Cway

[meesa]

Flash would be the easiest way, but Javascript if you can't do Flash.

[cway]

Thanks for the quick reply, meesa!
Do you know of a good flash or javascript?

[meesa]

Here is a simple JS code.

<script type="text/javascript">
var pics=new Array(
"pic1-URL.jpeg",
"pic2-URL.jpeg");

function cngImg(num){
document.getElementById('slideshow').src=pic[num];
}
</script>

With that, you simply add all your image URLs tothe array pics, just like pic1-URL.jpeg, they must have the double quoates, and each one should be separated by a comma, like above.

<div>
<img src="originalImg.jpeg" id="slideshow" alt="" />

<img src="redButton.jpeg" alt="" onclick="cngImg(0)" />
<img src="blueButton.jpeg" alt="" onclick="cngImg(1)" />
</div>

Note that I used 0 as the first one and 1 as the second, that is because they start at 0. If you want to chanage to the first image, it's 0, second is 1, and so on, just change that number in the ().

Also make sure that you don't tell it to go to an image that doesn't exist, your highest number should be how many URLs you have minus 1 (because it starts at 0)

[entranced]

This is how I would go about it. This seems to be the easiest way. Basically you will be displaying a different image with each selection. I am not sure if there is a way to actually change the color on the same image, which I imagine is the approach that you may have been going for. I would just use different images.