problem with image-changing script onhover

[anarchoi]

I have a page with one main image on the left. Default is a black t-shirt.
If you hover the mouse on the tshirt image, it will switch the image to a zoomed version

On the right, there's a couple of option boxes to change the color. If you click one of the boxes, it will change the tshirt image to a different color.

My problem is that once the color is changed, it will switch back to black color as soon as the mouse hover the tshirt.

I would need to somehow detect what is the current checked option box before changing the image when the mouse hover the tshirt, but i have no idea how i could do that

Any help would be very appreciated !

Here's my script:
http://www.ni-dieu-ni-maitre.com/test_tshirt.php
Steps to reproduce the bug:
- Check the box named "Marron". The tshirt should change to brown color.
- Hover the mouse on the tshirt. It is suposed to stay brown but it will turn back to black color

$articleid =  "17752477";
$imagesize = "280";
$imagetitle = "t-shirt";

echo "
<script type=\"text/javascript\">
function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
</script>



<table><tr><td>

<div class=\"articleImages\">
<a href=\"\" onmouseover=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/image/composition/$articleid/view/1/producttypecolor/2/type/png/width/$imagesize/height/$imagesize/$imagetitle.png')\"
onmouseout=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/image/product/$articleid/view/1/type/png/width/$imagesize/height/$imagesize')\">
<img src=\"http://image.spreadshirt.com/image-server/image/product/$articleid/view/1/type/png/width/$imagesize/height/$imagesize/$imagetitle.png\" border=\"0\" alt=\"$imagetitle\" title=\"$imagetitle\" class=\"pimg\" id=\"articleImage$articleid\" name=\"tshirtimage\" /></a>
</div>
</td><td>

    <input type=\"radio\" name=\"color\" id=\"productColor$productid\" value=\"2\"
	onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=2.png/$imagetitle.png')\">Noir<br />
    <input type=\"radio\" name=\"color\" id=\"productColor7094817\" value=\"120\"
    onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=120.png/$imagetitle.png')\">Marron<br />
";

The color code is found in the "value" setings of the radio inputs (i.e. 120 for brown) and then it is included in the url of the image

<input type=\"radio\" name=\"color\" id=\"productColor$productid\" value=\"120\"
onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=120.png/$imagetitle.png')\">Marron<br />

[sunfighter]

when you do this:
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}

You should also changed the <a href=\"\" onmouseover= image. It's still calling the black one.

That's a guess I haven't looked too hard at this.