<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cart sample</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script>
function change_br(id){
$('#model')
.html('<img src="img/brief-'+id+'.jpg" alt="model" width="342" height="611" />');
return false;
}
</script>
</head>
<body>
<table border="1" align="center">
<tr>
<td rowspan="2">
<div id="model">
<img src="img/brief-1.jpg" alt="model" width="342" height="611" />
<div style="display:none">
<img src="img/brief-2.jpg" alt="model" width="342" height="622" />
<img src="img/brief-3.jpg" alt="model" width="342" height="633" />
<img src="img/brief-4.jpg" alt="model" width="342" height="644" />
<img src="img/brief-5.jpg" alt="model" width="342" height="655" />
<img src="img/brief-6.jpg" alt="model" width="342" height="666" />
<img src="img/brief-7.jpg" alt="model" width="342" height="677" />
</div>
</div>
</td>
<td>Pick fabric for waistband</td>
</tr>
<tr>
<td>
<ul class="options">
<li><a href="#" onclick="return change_br(1)"><img src="img/col-1.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(2)"><img src="img/col-2.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(3)"><img src="img/col-3.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(4)"><img src="img/col-4.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(5)"><img src="img/col-5.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(6)"><img src="img/col-6.jpg" width="247" height="24" /></a></li>
<li><a href="#" onclick="return change_br(7)"><img src="img/col-7.jpg" width="247" height="24" /></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>