تغيير لون الخلفية حسب اختيار المستخدم

كود :
<table border="1" cellspacing="1" width="200">

<tr>

<td bgColor="#ffffff" align="center" width="29" height="0">

<p align="center"><a onmouseover="document.bgColor='FFFFFF'"> </a>

<td bgColor="#00ff00" align="center" width="29" height="0"><a onmouseover="document.bgColor='00FF00'"> </a>

<td bgColor="#ffffcd" align="center" width="29" height="0"><a onmouseover="document.bgColor='FFFFCD'"> </a>

<td bgColor="#000000" align="center" width="29" height="0"><a onmouseover="document.bgColor='000000'"> </a>

<td bgColor="#66cdaa" align="center" width="29" height="0"><a onmouseover="document.bgColor='66CDAA'"> </a>

<td bgColor="#ffb6c1" align="center" width="27" height="0"><a onmouseover="document.bgColor='FFB6C1'"> </a>

<td bgColor="#40e0d0" align="center" width="31" height="0"><a onmouseover="document.bgColor='40EODO'"> </a>

<td bgColor="#ffdead" align="center" width="29" height="0"><a onmouseover="document.bgColor='FFDEAD'"> </a>

<td bgColor="#00bfff" align="center" width="29" height="0"><a onmouseover="document.bgColor='00BFFF'"> </a>

<td bgColor="#fa8072" align="center" width="29" height="0"><a onmouseover="document.bgColor='FA8072'"> </a>

<td bgColor="#8fbc8f" align="center" width="29" height="0"><a onmouseover="document.bgColor='8FBC8F'"> </a>

<td bgColor="#00ffff" align="center" width="29" height="0"><a onmouseover="document.bgColor='00FFFF'"> </a>

<td bgColor="#dc143c" align="center" width="29" height="0"><a onmouseover="document.bgColor='DC143C'"> </a>

<td bgColor="#dcdcdc" align="center" width="29" height="0"><a onmouseover="document.bgColor='DCDCDC'"> </a>

<td bgColor="#e0ffff" align="center" width="28" height="0"><a onmouseover="document.bgColor='EOFFFF'"> </a>

<td bgColor="#b8860b" width="28" height="0"><a onmouseover="document.bgColor='B886OB'"> </a>

<td bgColor="#deb887" align="center" width="17" height="0"><a onmouseover="document.bgColor='DEB887'"> </a></td>

</tr>

</table>

<p align="center"> </p>