Question : Simple car-like color picker

I'm trying to code a simple shopping cart, problem is that I have run out of ideas as to how I can create a color picker like the one you get when selecting the color of a car. A simple set of colored squares that when clicked will change an image and send the information about the color when the form is submitted.

I hope I'm being clear, feel free to ask any questions.

Cheers

Answer : Simple car-like color picker

Here's a simple html and javascript model using t-shirts as an example of a product you might need to choose a color for.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Color Picker</title>
</head>
<body>
<div style="width:200px;height:200px;"><img id="shirt" src="images/RedTShirt.jpg" alt="" /></div>
<div style="width:40px;height:40px;float:left;"><a href="javascript:changeImage(1);"><img src="images/blue.jpg" alt="" /></a></div>
<div style="width:40px;height:40px;float:left;"><a href="javascript:changeImage(2);"><img src="images/red.jpg" alt="" /></a></div>
<div style="width:40px;height:40px;float:left;"><a href="javascript:changeImage(3);"><img src="images/green.jpg" alt="" /></a></div>
<div style="width:40px;height:40px;float:left;"><a href="javascript:changeImage(4);"><img src="images/gray.jpg" alt="" /></a></div>
<div style="width:40px;height:40px;float:left;"><a href="javascript:changeImage(5);"><img src="images/yellow.jpg" alt="" /></a></div>
<script language="javascript" type="text/javascript">
var tshirts = new Array("images/BlueTShirt.jpg","images/RedTShirt.jpg","images/GreenTShirt.jpg","images/GrayTShirt.jpg","images/YellowTShirt.jpg");
function changeImage(color) {
    document.getElementById('shirt').src = tshirts[color];
}
</script>
</body>
</html>