Example:
Source:
<SCRIPT LANGUAGE="Javascript">
image1 = new Image();
image1.src="../images/example_shirt_blue.gif";
image2 = new Image();
image2.src="../images/example_shirt_red.gif";
image3 = new Image();
image3.src="../images/example_shirt_green.gif";
image4 = new Image();
image4.src="../images/example_shirt_yellow.gif";
function changeImage(ref,selectedColor)
{
if (selectedColor == "Blue")
{
document.images[ref].src = image1.src;
}
else if (selectedColor == "Red")
{
document.images[ref].src = image2.src;
}
else if (selectedColor == "Green")
{
document.images[ref].src = image3.src;
}
else
{
document.images[ref].src = image4.src;
}
}
function addP00004()
{
document.uShopJSI.addProduct(
"P00004", <!-- Product ID -->
"Polo Shirt", <!-- Product Name -->
"" + <!-- Product Description and Options -->
"Color: " +
document.P00004.color.options[document.P00004.color.selectedIndex].value +
"; Size: " +
document.P00004.size.options[document.P00004.size.selectedIndex].value,
"2.0", <!-- Product Weight -->
document.P00004.quantity.value, <!-- Product Quantity -->
"$24.95", <!-- Product Price (Each) -->
"$0.00", <!-- Extra Price Modifiers -->
"$0.00", <!-- Product Classification -->
"$0.00", <!-- Product Shipping Modifier -->
"YES"); <!-- Taxable? -->
}
</SCRIPT>
<FORM NAME="P00004">
<IMG SRC="../images/example_shirt_blue.gif" NAME="shirt_image">
<BR><BR>
Color:
<SELECT NAME="color" onChange="changeImage(
'shirt_image',
document.P00004.color.options[document.P00004.color.selectedIndex].value);
">
<OPTION VALUE="Blue">Blue</OPTION>
<OPTION VALUE="Red">Red</OPTION>
<OPTION VALUE="Green">Green</OPTION>
<OPTION VALUE="Yellow">Yellow</OPTION>
</SELECT>
Size:
<SELECT NAME="size">
<OPTION VALUE="S">S</OPTION>
<OPTION VALUE="M">M</OPTION>
<OPTION VALUE="L">L</OPTION>
<OPTION VALUE="XL">XL</OPTION>
</SELECT>
Qty:
<INPUT TYPE=text SIZE=4 NAME="quantity" VALUE="1">
<A HREF="" onClick="addP00004();return false;">
<IMG SRC="../images/example_add_button.gif" border=0 align=TOP></A>
</FORM>
Note: Don't forget to add the uShopJSI applet to your page too:
<APPLET CODE="uShopJSI.class" CODEBASE="../classes/" NAME="uShopJSI" WIDTH="2" HEIGHT="2">
</APPLET>
|
|
|