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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with script to change thumbnail images

    Hey everyone, I used this code that was posted in a previous topic to change the thumbnail image on my page using a drop down menu. It worked great! However I have front and back views of this certain product and I need the script to be able to recognize which view the user has selected so it loads the correct front or back image. To explain a little its a t-shirt which loads to different colors. When Im viewing the back of the t-shirt, and want to change the color, I dont want the front images to load again because I only have the script written for that. I need it to detect that the back image is loaded, and then when a color is selected, to load that color on the back view. Any help and or direction would be appreciated. Thanks! I linked to a sample of what I've done so far.

    http://www.crusadeclad.com/tee/menuchange.html




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD><TITLE>JS1</TITLE>
    <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
    <!--
    Image1 = new Image(120,90)
    Image1.src = "teeblue.gif"
    Image2 = new Image(120,90)
    Image2.src = "teegreen.gif"
    Image3 = new Image(120,90)
    Image3.src = "teewhite.gif"
    Image4 = new Image(120,90)
    Image4.src = "teeblack.gif"
    function loadCatch(list)
    {
    var img = list.options[list.selectedIndex].value
    document.thumbnail.src = eval(img + ".src")
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
    <FORM ACTION="">
    <SELECT NAME="catch" onChange="loadCatch(this)">
    <OPTION VALUE="Image1" SELECTED>Bands
    <OPTION VALUE="Image2">Clips
    <OPTION VALUE="Image3">Lamp
    <OPTION VALUE="Image4">Else
    </SELECT>
    </FORM>
    </BODY>
    </HTML>

  • #2
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    what is a direction I can take or maybe a snippet of code that does something that is along the same lines? Would it be something like an if and then statement???

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by eplastek View Post
    what is a direction I can take or maybe a snippet of code that does something that is along the same lines? Would it be something like an if and then statement???
    I would just do a boolean.
    if(frontfacing==true){show front of the shirt}
    if(frontfacing!=true){show back of the shirt}

  • Users who have thanked TinyScript for this post:

    eplastek (03-20-2009)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I think you are making it too hard.

    Code:
    <script language=javascript>
    var fronts = new Array("teeblue.gif","teegreen.gif","teewhite.gif","teeblack.gif");
    var backs = new Array("teebackblue.gif","teebackgreen.gif","teebackwhite.gif","teebackblack.gif");
    
    var showing = fronts;
    
    </script>
    ...
    <body>
    <form>
    <input type=radio name="frontback" onclick="showing=fronts;" checked> Show front
    <input type=radio name="frontback" onclick="showing=backs;"> Show back
    
    <select onchange="document.getElementById("shirt").src=showing[this.selectedIndex];">
    <option>Blue
    <option>Green
    <option>White
    <option>Black
    </select>
    <form>
    
    <img id="shirt" src="teeblue.gif"><!-- shows blue front to start with -->
    </body>

  • Users who have thanked Old Pedant for this post:

    eplastek (03-20-2009)


  •  

    Posting Permissions

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