need help for color selection page

Discussion in 'HTML & Website Design' started by maven, Nov 29, 2006.

0
  1. #1
    hey guys, i need guidance on this problem. I have a color selection page which able to change color of the t-shirt model when i select the color thumbnails in this (www.mellon.com.sg/shop/colorselect.html) page there is also a color cell below the color thumbnails that display the color when it's chosen from the thumbnails . i want this color cell to display the text of the color instead. how do i do that? also i feel that the color thumbnails table layout are not even, is there anyway i can arrange it evenly in the tables. below is the code. appreciate the help
    


<title>Untitled Document</title>
</head>

<body>
<div>
<img id="tshirtImage" src="images/TShirtRed.jpg" width=240 height=240
	alt="" border="0" align="left">
<table width="189" id="swatches" 
	style="width:150;height:150;border:solid 1pt black;float:left;"
	cell-padding="0"
	cell-spacing="0">
<tr>
<td width="46" height="49" id="White" style="background-color:#FFFFFF;border:outset 2pt #D0D0D0;cursor:hand;" 
title="White">*</td>
<td width="55" id="Red" style="background-color:#FF0000;border:outset 2pt #D0D0D0;cursor:hand;" 
title="Red">*</td>
<td width="72" id="Maroon" style="background-color:#800000;border:outset 2pt #D0D0D0;cursor:hand;" 
title="Maroon">*</td>
</tr>
<tr>
<td style="background-color:#90C0FF;border:outset 2pt #D0D0D0;cursor:hand;"  
title="Sky_Blue"  id="Sky_Blue">*</td>
<td style="background-color:#000080;border:outset 2pt #D0D0D0;cursor:hand;"  
title="Navy_Blue"  id="Navy_Blue">*</td>
<td style="background-color:#008000;border:outset 2pt #D0D0D0;cursor:hand;"  
title="Green">*</td>
</tr>
<tr>
<td style="background-color:#FFC000;border:outset 2pt #D0D0D0;cursor:hand;" 
title="Yellow"  id="Yellow">*</td>
<td style="background-color:#C000C0;border:outset 2pt #D0D0D0;cursor:hand;" 
title="Violet" id="Violet">*</td>
<td style="background-color:#000000;border:outset 2pt #D0D0D0;cursor:hand;" 
title="Black" id="Black">*</td>
</tr>
</table>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<table id="displaySwatch"
	style="width:150;height:150;border:solid 1pt black;" cell-padding="0"
	cell-spacing="0">
<tr>
<td id="displayCell" 
	style="background-color:#FFFFFF;border:inset 2pt #D0D0D0;cursor:hand;" 
	title="Result">*</td></tr>
</table>
</div>
<script>
var selectedCell=null;

function depressCell(color){
	var cell=null;
	if (""+color=="undefined"){
		cell=window.event.srcElement
		}
	else {
		cell=document.all(color);
		}
	if (cell.tagName=="TD"){
		if (selectedCell!=null){
			selectedCell.style.border="outset 2pt #D0D0D0"
			}
		cell.style.border="inset 2pt #D0D0D0"
		selectedCell=cell;
		updateResult(cell)
		}
	}

function updateResult(cell){
	displayCell.style.backgroundColor=cell.style.backg  roundColor;
	displayCell.align="center";
	displayCell.valign="middle";
	displayCell.style.fontWeight="bold";
	if ((cell.title=="White")||(cell.title=="Yellow")){
		displayCell.style.color="#000000";
		}
	else {
		displayCell.style.color="#FFFFFF";
		}	
	tshirtImage.src="images/TShirt"+cell.title+".jpg";	
	}	
swatches.onmousedown=depressCell
depressCell("White");

</script>


</body>
</html>
    Code (markup):

     
    maven, Nov 29, 2006 IP