<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Just Sweats</title>
<style type="text/css">
.leftColumn { position: relative;
float: left
}
.rightColumn{ position: relative;
float: left;
padding: 20px;
border-width:10px;
width: 400px
}
</style>
<script type = "text/javascript">
<!--
var imgArray=["images/red.jpg", "images/black.jpg", "images/gray.jpg"]; //src attributes for images
var colorNames=["Firetruck","Blackest Black","Dark Gray"]; //Color names
var sizesAvailable=[[0,1,1,1,1],[1,1,0,0,0],[0,0,0,1,1]]; //for each color: XS,S,M,L,XL, 1 indicates size is available
var sizesArray=["XS","S","M","L","XL"]; //the sizes corresponding to the sizesAvailable
var blockIdArray=["redBlock", "blackBlock", "grayBlock"]; //ids of the color blocks
var selectedColorIndex=0; //initially selected color
//Set the initial size of the image
//Set the initial border around the selected color block
//CSS attributes must be set programmatically in order to be accessed
function initialCSS() {
//Set the image size
var obj = document.getElementById("currentImg");
obj.style.width="192px";
obj.style.height="285px";
//Set the border style
var selectedBlock=document.getElementById(blockIdArray[selectedColorIndex]);
selectedBlock.style.borderStyle="solid";
selectedBlock.style.borderColor="blue";
}
//Scale the image by factor
//Use the image collection to get the image with ID "currentImg"
//Then scale it by factor
//Remember that the width and height style properties will look something like "192px", so
//you must convert them to an integer to remove the "px", and then when you write them back out
//to the style property, you must add "px" back in to the new value
function scale(factor){
var obj = document.getElementById("currentImg");
obj.style.width = String(parseInt(obj.style.width)*factor)+"px";
obj.style.height = String(parseInt(obj.style.height)*factor)+"px";
}
//When the user clicks on a new color,
//show the name and sizes available for the current color by appending a child to the "colorArea" div node
//You will need to use color to index into a number of arrays
//and you'll have to convert the array of 1's and 0's to a String that can be put in a text node
function showNameAndSizes(color) {
var colors = "Color: " + colorNames[color];
var sizes = "Sizes:";
for (i=0;i<sizesArray.length;i++)
{
if (sizesAvailable [color][i])
{
sizes+= " " + sizesArray[i]
}
}
var colArea = document.getElementById('colorArea');
var colorInfoNode=document.createElement("p");
var sizeInfoNode=document.createElement("p");
var colorNode=document.createTextNode(colors);
var sizeNode=document.createTextNode(sizes);
colorInfoNode.appendChild(colorNode);
sizeInfoNode.appendChild(sizeNode);
colArea.appendChild(colorInfoNode);
colArea.appendChild(sizeInfoNode);
}
//Change the selected color block and the image; show the color name and available sizes
function selectColor(color) {
//Change to the new image
var imageArea=document.getElementById("currentImg");
imageArea.src=imgArray[color];
//Get the selected color block, deselect, and select the new color block
//First deselect the old by setting borderStyle to "none":
var currentBlock=document.getElementById(blockIdArray[selectedColorIndex]);
currentBlock.style.borderStyle="none";
//Then select the new:
var selectedBlock=document.getElementById(blockIdArray[color]);
selectedColorIndex=color
selectedBlock.style.borderStyle="solid";
selectedBlock.style.borderColor="blue";
//Show color name and available sizes under the selected block:
showNameAndSizes(color);
}
// -->
</script>
</head>
<body>
<div class="leftColumn">
<p>
<img src="images/red.jpg" id="currentImg" />
</p>
<form action="">
<img src="images/magnifyButton.jpg" onClick="scale(2);" />
<img src="images/reduceButton.jpg" onClick="scale(.5);" />
</form>
</div>
<div class="rightColumn" id="colorArea">
<p>Select color:<br />
<img src="images/redBlock.jpg" id="redBlock" onClick="selectColor(0);" />
<img src="images/blackBlock.jpg" id="blackBlock" onClick="selectColor(1);"/>
<img src="images/grayBlock.jpg" id="grayBlock" onClick="selectColor(2);"/>
</p>
</div>
<script language="Javascript" type="text/javascript">
initialCSS(); //set up the CSS that needs to be accessed
selectColor(0); //select the first color item to display to the user
</script>
</body>
</html>
If you end up running this, i need to have it remove the node of color/sizes instead of just appending it every time and having multiples.
50-200fg! should be simple.