Not good with javascript so I need help plz!

KoolAide187 · 02-06-2013, 04:15 AM

Alright for example of what we have now let me give you a visual. http://www.echocalls.com/timberbuild.html We make duck calls as crazy as it sounds but it pays the bills and pays them well. The duck calls consist of a Barrel and an Insert. Alright so what I am wanting to do to change up this web page is to offer different types of bands. Which is the shinny silver piece on the barrel. Instead of doing a grab a + b and display 1 image. I am wanting to do a Grab "A" display barrel. Grab "B" display Band. Grab "C" display Insert. And have it to where they display separately and have them cropped in a fashion so they all line up together. Then when the user has selected all 3 of their choosing they can click buy now and it send them to the cart. Any help would be greatly appreciated.

Old Pedant · 02-06-2013, 06:42 AM

Ummm...since this *is* a commercial project, if you want somebody to code this for you, don't you think you should be paying for it?

You don't give away your duck calls, do you?

I do see some potential problems, right off the bat.

I noticed that some of your images shift around just a little bit. That's okay when you have unique images for each combination, but it would be a killer in the kind of situation you are talking about.

Also, the CLEAR barrel is going to be a challenge. Putting one image on top of another is easy, but putting CLEAR on top of a color would mean that only the clear would show...it would cover up the color. It would take somebody proficient in Photoshop to go add transparency at the right spots in the clear image to have it come out right.

KoolAide187 · 02-06-2013, 01:40 PM

We do give away our ducks when somebody wants them. We keep the first few hunts for the freezer and through out the year we give away out ducks. Anyways... everything on the internet is free. It's not commercial in that I own the company. I don't own it but I am working on the web page to help my parents out. They don't pay me for it. But I like being ahead of the game when it comes to web pages, graphics, and duck calls. Yes some of the images shift. When we take the next pictures they won't move.

Philip M · 02-06-2013, 03:53 PM

Quote:

Originally Posted by KoolAide187

We do give away our ducks when somebody wants them. We keep the first few hunts for the freezer and through out the year we give away out ducks. Anyways... everything on the internet is free. It's not commercial in that I own the company. I don't own it but I am working on the web page to help my parents out. They don't pay me for it. But I like being ahead of the game when it comes to web pages, graphics, and duck calls. Yes some of the images shift. When we take the next pictures they won't move.

This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

But your parents' website is a commercial one aimed at selling goods, so you ought to pay a professional to do this work. Just because you are "no good with Javascript" that does not mean that you are entitled to expect other people to do your work for you for nothing.

Airblader · 02-06-2013, 07:38 PM

Quote:

Originally Posted by KoolAide187

Anyways... everything on the internet is free.

Says the person looking for help on selling a product on the internet.

KoolAide187 · 02-06-2013, 10:59 PM

I am sure the code is out there. Just having trouble finding it. And when I said everything on the internet is free I meant open source mainly. It was early when I wrote that and I had just woke up.

Airblader · 02-06-2013, 11:10 PM

Well this might be shocking, but just because it's Open-Source, you're not allowed to use it. Many open-source projects use licenses that forbid commercial usage. So this will trim down the possibilites even more.

Old Pedant · 02-06-2013, 11:23 PM

Sorry, but I don't think you will find the *exact* code you are looking for.

In fact, this is as much a problem in Photoshop (or equivalent) manipulation as it is anything.

The concept is simple:

Code:

<div style="position: relative;">
    <img style="position: absolute;top: 0px;left: 0px; z-index: 1;" id="insert" />
    <img style="position: absolute;top: 0px;left: 0px; z-index: 2;" id="base" />
    <img style="position: absolute;top: 0px;left: 0px; z-index: 3;" id="ring" />
</div>

So three images, all the same size. The "insert" images can be JPG's, but the base and ring images have to be PNGs or GIFs, with appropriate "transparency" to allow the layers below (the z-index numbers indicate the "priority"--higher numbers on top of lower) to show through as needed.

After that, it's just a matter of having the radio buttons change the image that corresponds to their layer.

Code:

<input type="radio" name="rbinsert" value="red" 
       onclick="document.getElementById('insert').src='redInsert.png';"/>

But *ALL* those images have to be near perfect: Lined up all identically so that, for example, a red insert isn't 10 pixels to the left of a blue insert.

KoolAide187 · 02-06-2013, 11:58 PM

Alright so here is what I have so far. I actually have been editing the code a little since my last post on here.

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<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 i=0; i <document.myform.col2.length; i++) {  
                        if (document.myform.col2[i].checked) {  
                                B = document.myform.col2[i].value; 
                                break;
                        }  
                } 
                for (var i=0; i <document.myform.col3.length; i++) {  
                        if (document.myform.col3[i].checked) {  
                                C = document.myform.col3[i].value; 
                                break;
                        }  
                } 
				
                var x = A;  
                if (x) {  
                        var picture = x + ".jpg";
                        document.getElementById("myImage").src = picture;  
                }  
        }  
		        var y = B;  
                if (y) {  
                        var picture = y + ".jpg";
                        document.getElementById("myImage1").src = picture;  
                }  
        }  
		        var z = C;  
                if (z) {  
                        var picture = z + ".jpg";
                        document.getElementById("myImage2").src = picture;  
                }  
        }  
        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 i=0; i <document.myform.col2.length; i++) {  
                        if (document.myform.col2[i].checked) {  
                                B = document.myform.col2[i].value; 
                                break;
                        }  
                } 
                for (var i=0; i <document.myform.col3.length; i++) {  
                        if (document.myform.col3[i].checked) {  
                                C = document.myform.col3[i].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" align="middle" id = "myImage">
<img src = "band1.jpg" width=63 height=150 border="0" align="middle" id = "myImage1" />
<img src = "purplei.jpg" width=183 height=150 border="0" align="middle" id = "myImage2" /><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>
    <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>
</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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

It looks like it should work now. I am having a feeling it has something to do with the src = picture; part. Maybe I need a picture1 or something. I'm gonna mess with the code you just gave me also pendant. Thanks for your help. Also we are changing the images up so they will all be stationary no changing in them. The camera will be on a tripod and the call on a stationary felt of some sort.

This code seems to keep the pictures together well. Will this not work or do I still have to use the PNG/GIF?

Code:

<div align="center"><img src = "purpleb.jpg" width=200 height=150 border="0" align="middle" id = "myImage"><img src = "band1.jpg" width=63 height=150 border="0" align="middle" id = "myImage1" /><img src = "purplei.jpg" width=183 height=150 border="0" align="middle" id = "myImage2" /><br />

Old Pedant · 02-07-2013, 01:07 AM

I think you are making a mistake, relying upon align="middle".

I think you really should have all 3 images the same size, as I said.

But likely for most browsers and most images it will work.

BUT...

But go try that with your CLEAR base. And look what happens. Enough said?

KoolAide187 · 02-07-2013, 03:43 AM

I removed the align middle but the code is still not working.
I ran it through a lint online program, fixed them, and now it's changing the first image when I want but not the rest. Any suggestions?

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">
<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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Old Pedant · 02-07-2013, 09:02 PM

Put a live page up on the site. You can use an oddball name like "test_x73_framitz.html" so people won't stumble on it by accident.

We can't really test your code without your images.

KoolAide187 · 02-08-2013, 12:00 AM

yes sir here is your live view. http://www.echocalls.com/XLTbuild1.html

xelawho · 02-08-2013, 12:07 AM

Quote:

B is not defined

you need to look at your error console. it seems to me that you have a curly brace too early in the showImage function, meaning that the function is closed and being that B is local to that function it is undefined by the time you say var y = B;

KoolAide187 · 02-08-2013, 03:19 AM

FIXED IT! Thx man. I moved the bracket from A to the bottom of C. Now it works great! I really appreciate it brother.