I've been using this code to pull an option from 2 choices to make 1 image and now i'm trying to make it load an individual image for each choice but have all the images side by side as they load to create a different color combination. I can get the first image to load fine but the next two don't work. Any help would be appreciated. I am fairly new to the javascript stuff but I am trying to manage. =/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="Duck Hunting" content="Duck Calls for Duck Hunting"><meta name="Description" content="One of the top leading Duck Call Manufacturers in the world. We have been in business making and selling duck calls since 1975. World Championship Duck Calls. Echo Duck Calls XLT Builder"><meta name="Keywords" content="Duck Call Builder, Duck Calls, Duck Hunting, Duck Hunting Videos, Duck Calling, Duck Hunting DVDs, Duck Calling CD's, Duck Hunting Gear, Duck Call Parts, Duck Call Making Supplies, Best Duck Calls, World Championship Duck Calls"><meta name="Publisher" content="Rick Dunn"><meta name="Author" content="Rick Dunn"><meta name="Distribution" content="Global"><meta name="Robots" content="All"><title>Echo Extra Loud Timber Duck Call Builder</title><style type="text/css">
body {
margin:0;
padding:0;
color: #FFFFFF;
font: normal 1.2em sans-serif, Arial;
background-color: #000000;
width: 100%;
}
h1 {
padding-left: 55px;
font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform:uppercase;
letter-spacing:.0.0em;
}
a {
outline: none;
}</style><style type="text/css">
/* rotator in-page placement */
div#rotator {
position:relative;
height:145px;
margin-left: 15px;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
margin-left:-350px;
left: 50%;
top: 1px;
background-color: #000000;
}
/* IMAGE BORDER IS PADDING */
div#rotator ul li img {
border:0px solid #000000;
padding: 0px;
background: #FFF;
}
div#rotator ul li.show {
z-index:500
}</style><script type="text/javascript" src="http://www.echocalls.com/jquery.min.js"></script><script type="text/javascript">
function theRotator() {
$('div#rotator ul li').css({opacity: 0.0});
$('div#rotator ul li:first').css({opacity: 1.0});
setInterval('rotate()',6000);
}
function rotate() {
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
if ( current.length == 0 ) current = $('div#rotator ul li:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
}
$(document).ready(function() {
theRotator();
});
</script>
.<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}</style><!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 --><!--[if IE 6]><style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}</style><![endif]--><script type="text/javascript"> // function for javascript use of the GET method
function showImage() {
var A, B, C;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
break;
}
}
for (var j=0; j <document.myform.col2.length; j++) {
if (document.myform.col2[j].checked) {
B = document.myform.col2[j].value;
break;
}
}
for (var k=0; k <document.myform.col3.length; k++) {
if (document.myform.col3[k].checked) {
C = document.myform.col3[k].value;
break;
}
}
var x = A;
if (x) {
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;
}
}
var y = B;
if (y) {
var pictureone = y + ".jpg";
document.getElementById("myImageone").src = pictureone;
}
var z = C;
if (z) {
var picturetwo = z + ".jpg";
document.getElementById("myImagetwo").src = picturetwo;
}
function SendUserToBuy() {
var A, B, C;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
break;
}
}
for (var j=0; j <document.myform.col2.length; j++) {
if (document.myform.col2[j].checked) {
B = document.myform.col2[j].value;
break;
}
}
for (var k=0; k <document.myform.col3.length; k++) {
if (document.myform.col3[k].checked) {
C = document.myform.col3[k].value;
break;
}
}
window.location = "http://aitsafe.com/cf/add.cfm?userid=4590131&product=Echo+XLT+"+A+"+"+B+"+"+C+"&price=139.95";
}</script></head><style type="text/css">
body {
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: black;
scrollbar-track-color: white;
scrollbar-face-color: #949494;
scrollbar-shadow-color: white;
scrollbar-highlight-color: silver;
scrollbar-3d-light-color: black;
}</style><STYLE TYPE="text/css">
a:link { color: #999999; text-decoration: none }
a:active { color: #FFFFFF; text-decoration: none }
a:visited { color: #999999; text-decoration: none }
a:hover { color: #FF0000; text-decoration: none; background: #000000}</STYLE><style type="text/css" style="display: none;">
.duck-button
{
border-top: 1px solid #383b3d;
background: #0e0f0f;
background: -webkit-gradient(linear, left top, left bottom, from(#47494a), to(#0e0f0f));
background: -moz-linear-gradient(top, #47494a, #0e0f0f);
padding: 7px 14px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.duck-button:hover
{
border-top-color: #2b2b2b;
background: #2b2b2b;
color: #ccc;
}
.duck-button:active
{ border-top-color: #191a1a;
background: #191a1a;
}
</style><body><body text="#FFFFFF" bgcolor="#000000" link="#999999" vlink="#999999" alink="#FFFFFF"><div id="page-background"><img src="http://www.echocalls.com/bgimage.jpg" width="100%" height="100%" alt="Smile"></div><div id="content"><div id="rotator"><ul><li class="show"><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner1.jpg" width="700" height="125" alt="banner1" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner2.jpg" width="700" height="125" alt="banner2" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner3.jpg" width="700" height="125" alt="banner3" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner4.jpg" width="700" height="125" alt="banner4" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner5.jpg" width="700" height="125" alt="banner5" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner6.jpg" width="700" height="125" alt="banner6" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner7.jpg" width="700" height="125" alt="banner7" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner8.jpg" width="700" height="125" alt="banner8" /></a></li><li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner9.jpg" width="700" height="125" alt="banner9" /></a></li></ul></div><br><center><div><a href="http://www.echocalls.com/index.html" class="duck-button">Home</a><a href="http://www.echocalls.com/aboutus.html" class="duck-button">About Us</a><a href="http://www.echocalls.com/duckcalls.html" class="duck-button">Duck Calls</a><a href="http://www.echocalls.com/goosecalls.html" class="duck-button">Goose Calls</a><a href="http://www.echocalls.com/CallBuilder.html" class="duck-button">Call Builder</a><a href="http://www.echocalls.com/accessories.html" class="duck-button">Accessories</a><a href="http://www.echocalls.com/shop.html" class="duck-button">Shop Online</a><a href="http://www.echocalls.com/staffing.html" class="duck-button">Team Echo</a><a href="http://www.echocalls.com/contactus.html" class="duck-button">Contact Us</a></div><br /><form name = "myform" method="GET"><div align="center"><img src="http://www.echocalls.com/XLTbuildpic.jpg" alt="" width="389" height="292" /></div><center><font face="Verdana, Geneva, sans-serif" size="+2">Actual Engravings on the Duck Call</font></center><br /><div align="center"><table width="1301" height="481" border="1"><tr><td><center>Duck Call Color Image:</center></td><td width="185" height="28">Barrels:</td><td width="277">Bands:</td><td width="168">Inserts:</td></tr><tr><td width="643" height="443"><div align="center"><img src = "purpleb.jpg" width=200 height=150 border="0" id = "myImage"><img src = "band1.jpg" width=56 height=150 border="0" id = "myImageone" /><img src = "purplei.jpg" width=183 height=150 border="0" id = "myImagetwo" /><br /><br> <font face="Verdana, Geneva, sans-serif" size="-1"><b>Select any color you like between barrels and inserts and we will make it for you!<br><br />
Colors will appear in this image as you select them to the right.</b></font><br><br /></div></td><td height="443" align="left"><font face="Verdana, Geneva, sans-serif"><input type = "radio" name = "col1" value = "purpleb" onclick = "showImage();">Purple<br> <input type = "radio" name = "col1" value = "blackb" onclick = "showImage();">Black<br> </font><td height="443" align="left"><font face="Verdana, Geneva, sans-serif"><input type = "radio" name = "col2" value = "band1" onclick = "showImage();">Stainless<br> <input type = "radio" name = "col2" value = "band2" onclick = "showImage();">Red Stainless<br> </font><td height="443" align="left"><font face="Verdana, Geneva, sans-serif"><input type = "radio" name = "col3" value = "purplei" onclick = "showImage();">Purple<br> <input type = "radio" name = "col3" value = "blacki" onclick = "showImage();">Black <br></font><br></td></td></tr></table><br><input type="button" name="submitButton" value="Buy Now" onClick="SendUserToBuy();"></div> </form><td VALIGN=TOP WIDTH="586"><center><p><font face="Verdana"><a href="http://www.echocalls.com/news.html">Echo News</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/soundfiles.html">Listen To Duck Calls</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/video.html">Video Clips</a><img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/links.html">Links</a><img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/dealers.html">Dealers</a><img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/compcircuit.html">Comp Circuit</a></font></center></td></tr><font face="Verdand" size=-1 color=#FFFFFF align="bottom"><center>
Copyright © 2001
<script language="JavaScript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2010)
document.write("- "+yr);</script>
Echo Championship Duck Calls. ALL content including images may not be reproduced without first obtaining written permission. </p></center></font><table width="800" border="0"><tr><td> </td></tr><tr><td> </td></tr></table></body></html>