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. =/
[code]<!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">
Echo Extra Loud Timber Duck Call Builder
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;
}
/* 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
}
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();
});
.
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;}
// function for javascript use of the GET method
function showImage() {
var A, B, C;
for (var i=0; i
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;
}
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}
.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;
}
Actual Engravings on the Duck Call
Copyright 
