Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Not good with javascript so I need help plz!

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by KoolAide187 View Post
    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.
    Last edited by Philip M; 02-06-2013 at 04:08 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by KoolAide187 View Post
    Anyways... everything on the internet is free.
    Says the person looking for help on selling a product on the internet.


  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    KoolAide187 (02-07-2013)

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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 />
    Last edited by KoolAide187; 02-07-2013 at 12:28 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    KoolAide187 (02-07-2013)

  • #11
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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>
    Last edited by KoolAide187; 02-07-2013 at 04:22 AM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    KoolAide187 (02-08-2013)

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    yes sir here is your live view. http://www.echocalls.com/XLTbuild1.html

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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;

  • Users who have thanked xelawho for this post:

    KoolAide187 (02-08-2013)

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    FIXED IT! Thx man. I moved the bracket from A to the bottom of C. Now it works great! I really appreciate it brother.
    Last edited by KoolAide187; 02-08-2013 at 04:49 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •