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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy using drop down menu to change multiple images

    Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image...

    Code:
       <script type="text/javascript"> 
    function changeWalls(what, whatimg) 
    { 
    if(what != "none")
    {
    document.images[whatimg].src = what;
    }
    } 
          </script>
          <select name="Walls" onchange="changeWalls(this.value,'walls')">
            <option value="images/white.gif" selected="selected">Please Select a Colour</option>
            <option value="images/WALLCC.png">Classic Cream</option>
            <option value="images/WALLSG.png">Shale Grey</option>
            <option value="images/WALLDO.png">Deep Ocean</option>
            <option value="images/WALLSM.png">Surfmist</option>
          </select>
    then the images i want are multiples so i want to change 2 of these
    Code:
    <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,571
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    So show what the second <img> tag looks like.

    And do you mean that both of the <img>s will get the *same* new .src? Or that each gets a different .src?
    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:

    jay83r (01-17-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    they will both have the same src so basically changing 2 images that are duplicated on the page in different areas from the one dropdown box.

    Code:
    <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls3" />

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    why pass the "walls" variable if you're never going to change it? unless I'm confused, you can make your onchange like this:
    Code:
    <select name="Walls" onchange="changeWalls(this.value)">
    and your function like this:
    Code:
    function changeWalls(what) 
    { 
    if(what != "none")
    {
    document.getElementById('walls2').src = what;
    document.getElementById('walls3').src = what;
    }
    }

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,571
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Yeah, exactly what I was going to suggest.

    And names for <img> tags is kind of retro, so zap the names and stick with ids, only.
    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.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that it works well... is there a reason why i can't do this more than once on the same page... it works the first time but not the second.
    Code:
    <script type="text/javascript"> 
    function changeWalls(what, whatimg) 
    { 
    if(what != "none")
    {
    document.getElementById('walls2').src = what;
    document.getElementById('walls3').src = what;
    }
    } 
            </script>
            <select name="Walls" onchange="changeWalls(this.value)">
              <option value="images/white.gif" selected="selected">Please Select a Colour</option>
              <option value="images/WALLCC.png">Classic Cream</option>
              <option value="images/WALLSG.png">Shale Grey</option>
              <option value="images/WALLDO.png">Deep Ocean</option>
              <option value="images/WALLSM.png">Surfmist</option>
            </select>
          </p>
        <p>
              <p> 
    		  
    		  <script type="text/javascript"> 
    function changeSides(what, whatimg) 
    { 
    if(what != "none")
    {
    document.getElementById('sides1').src = what;
    document.getElementById('sides2').src = what;
    }
    } 
            </script>
          <select name="Sides" onchange="changeSides(this.value)">
            <option value="images/white.gif" selected="selected">Please Select a Colour</option>
            <option value="images/SIDECC.png">Classic Cream</option>
            <option value="images/SIDESG.png">Shale Grey</option>
            <option value="images/SIDEDO.png">Deep Ocean</option>
            <option value="images/SIDESM.png">Surfmist</option>
          </select>

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    dunno... we'd probably have to see your html. are you sure you have your div ids correct?

    but if you're going to do the same thing with various selects you can use the one function like this:

    Code:
    function changePic(what, one,two) { 
    if(what != "none"){
    document.getElementById(one).src = what;
    document.getElementById(two).src = what;
             }
    }
    and have your select onchanges like this:

    Code:
    <select name="Walls" onchange="changePic(this.value,'walls2',walls3')">
    <select name="Sides" onchange="changePic(this.value,'sides1','sides2')">
    etc

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    this is what i have... let me know the easiest way. i thought each function was named differently so they were independant
    Code:
    <title>Untitled Document</title>
    <style type="text/css">
    .auto-style1 {font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
    .auto-style2 {	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
    .auto-style21 {background-color: #86FF00;
    }
    .auto-style3 {	border: 2px solid #008000;
    }
    .layered {
    	position: relative;
    }
    body {
    	background-image: url(images/logobk.jpg);
    	background-repeat: no-repeat;
    }
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    
    
    <body>
    <p>&nbsp;</p>
    <p class="auto-style2">Best Sheds Ordering System</p>
    <p class="auto-style2"><span class="auto-style1">1. Enter Customer Details&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      2. Choose Your Shed Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3. </span><span class="auto-style21">Choose 
        Options</span><span class="auto-style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 4. Print a Quote&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          5. Order </span></p>
    <form action="" method="post" name="form1" id="form1">
      <p class="auto-style2">The Standard Inclusions for your Single Garage have been already selected, choose options below to modify.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
      <p class="auto-style2">To modify your order please choose options from the 
        list below.</p>
      <p class="auto-style2">Dimension Settings of Shed: </p>
      <p class="auto-style2">Height 
        <label for="height"></label>
        <select name="height" id="height">
          <option value="2.4m">2.4m</option>
          <option value="2.7m">2.7m</option>
          <option value="3.0m">3.0m</option>
        </select> 
        Width 
        <label for="width"></label>
        <select name="width" id="width">
          <option value="3.0m">3.0m</option>
          <option value="3.6m">3.6m</option>
          <option value="4.2m">4.2m</option>
          <option value="5.0m">5.0m</option>
        </select> 
        Length 
        <label for="length"></label>
        <select name="length" id="length">
          <option value="4.0m 1 Bay">4.0m 1 Bay</option>
          <option value="5.0m 1 Bay">5.0m 1 Bay</option>
          <option value="6.0m 2 Bays">6.0m 2 Bays</option>
          <option value="7.0m 2 Bays">7.0m 2 Bays</option>
        </select>
      </p>
    </form>
    <p class="auto-style2">Colour Selector</p>
    <table width="1254" border="1">
      <tr>
        <td width="268">Flashings
          <script type="text/javascript"> 
    function changeFlashing(what, whatimg) 
    { 
    if(what != "none")
    {
    document.images[whatimg].src = what;
    }
    } 
          </script>
          <select name="Flashing2" onchange="changeFlashing(this.value,'flashing')">
            <option value="deepocean.gif" selected="selected">Please Select a Colour</option>
            <option value="classiccream.gif">Classic Cream</option>
            <option value="shalegrey.gif">Shale Grey</option>
            <option value="deepocean.gif">Deep Ocean</option>
            <option value="surfmist.gif">Surfmist</option>
          </select>
        <img src="deepocean.gif" alt="" name="flashing" border="0" id="flashing" /></td>
        <td width="285">Rollerdoors
          <script type="text/javascript"> 
    function changeRollerdoors(what, whatimg) 
    { 
    if(what != "none")
    {
    document.images[whatimg].src = what;
    }
    } 
          </script>
          <select name="Rollerdoors2" onchange="changeRollerdoors(this.value,'rollerdoors')">
            <option value="white.gif" selected="selected">Please Select a Colour</option>
            <option value="classiccream.gif">Classic Cream</option>
            <option value="shalegrey.gif">Shale Grey</option>
            <option value="deepocean.gif">Deep Ocean</option>
            <option value="surfmist.gif">Surfmist</option>
          </select>
        <img src="surfmist.gif" alt="" name="rollerdoors" border="0" id="rollerdoors" /></td>
        <td width="238"><p>Walls</p>
          <p> <script type="text/javascript"> 
    function changeWalls(what, whatimg) 
    { 
    if(what != "none")
    {
    document.getElementById('walls2').src = what;
    document.getElementById('walls3').src = what;
    }
    } 
            </script>
            <select name="Walls" onchange="changeWalls(this.value)">
              <option value="images/white.gif" selected="selected">Please Select a Colour</option>
              <option value="images/WALLCC.png">Classic Cream</option>
              <option value="images/WALLSG.png">Shale Grey</option>
              <option value="images/WALLDO.png">Deep Ocean</option>
              <option value="images/WALLSM.png">Surfmist</option>
            </select>
          </p>
        <p>
          <p> 
    		  
    	    <script type="text/javascript"> 
    function changeSides(what, whatimg) 
    { 
    if(what != "none")
    {
    document.getElementById('sides1').src = what;
    document.getElementById('sides2').src = what;
    }
    } 
            </script>
          <select name="Sides" onchange="changeSides(this.value)">
            <option value="images/white.gif" selected="selected">Please Select a Colour</option>
            <option value="images/SIDECC.png">Classic Cream</option>
            <option value="images/SIDESG.png">Shale Grey</option>
            <option value="images/SIDEDO.png">Deep Ocean</option>
            <option value="images/SIDESM.png">Surfmist</option>
          </select>
        </p></td>
        <td width="435">Roofing
          <label for="flashingcolour4"></label>
          <label for="flashings4"></label>
          <script type="text/javascript"> 
    function changeRoofing(what, whatimg) 
    { 
    if(what != "none")
    {
    document.getElementById('roof2').src = what;
    document.getElementById('roof3').src = what;
    }
    } 
          </script>
          <select name="Roofing" onchange="changeRoofing(this.value,'roofing')">
            <option value="white.gif" selected="selected">Please Select a Colour</option>
            <option value="classiccream.gif">Classic Cream</option>
            <option value="shalegrey.gif">Shale Grey</option>
            <option value="deepocean.gif">Deep Ocean</option>
            <option value="surfmist.gif">Surfmist</option>
        </select></td>
      </tr>
    </table>
    <table width="90%" height="478" class="auto-style3" style="width: 100%">
    <tr>
      <td><table width="88%" class="auto-style3" style="width: 100%">
        <tr>
          <td width="39%" height="220"><p class="auto-style2"><strong>Front of Shed</strong></p>
            <p><span class="auto-style2">Rollerdoors </span>
              <?php
    echo '<select name="rollerdoorfront">'; 
    echo '<option value="">--Select--</option>'; 
    while($opt = mysql_fetch_array($resultOptions)) 
    { 
    echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>'; 
    } 
    echo '</select>'; 
    
    ?>
              Left
              <input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
              <label for="rollerdoorleft"></label>
              Centre
              <input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
              <label for="rollerdoorleft"></label>
              Right
              <input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
              <label for="rollerdoorleft"></label>
              </p>
            <p><span class="auto-style2">PA Doors </span>
              <select class="auto-style2" name="Select5">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                </select>
              <span class="auto-style2"> </span>Left
              <input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
              <label for="rollerdoorleft2"></label>
              Centre
              <input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
              <label for="rollerdoorleft2"></label>
              Right
              <input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
              <label for="rollerdoorleft2"></label>
              </p>
            <p><span class="auto-style2">Windows </span>
              <select class="auto-style2" name="Select9">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                </select>
              <span class="auto-style2"> </span>Left
              <input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
              <label for="rollerdoorleft3"></label>
              Centre
              <input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
              <label for="rollerdoorleft3"></label>
              Right
              <input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
              <label for="rollerdoorleft3"></label>
            </p></td>
          <td width="5%">
            <div align="center"><img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /></div></td>
          <td width="56%" colspan="2" rowspan="2"><p class="auto-style2">&nbsp;</p>        <!<img src="images/front_0002_front-wall-colour.png" alt="" name="front" id="front3" />        <p class="auto-style2">&nbsp;</p></td>
          </tr>
        <tr>
          <td height="222"><p class="auto-style2"><strong>Back of Shed</strong></p>
            <p><span class="auto-style2">Rollerdoors </span>
              <?php
          echo '<select name="rollerdoorrear">'; 
    echo '<option value="">--Select--</option>'; 
    while($opt = mysql_fetch_array($resultOptions2)) 
    { 
    echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>'; 
    } 
    echo '</select>'; 
    
    ?>
              Left
      <input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
      <label for="rollerdoorleft7"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
      <label for="rollerdoorleft7"></label>
              Right
      <input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
      <label for="rollerdoorleft7"></label>
            </p>
            <p><span class="auto-style2">PA Doors </span>
              <select class="auto-style2" name="Select6">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
      <label for="rollerdoorleft8"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
      <label for="rollerdoorleft8"></label>
              Right
      <input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
      <label for="rollerdoorleft8"></label>
            </p>
            <p><span class="auto-style2">Windows </span>
              <select class="auto-style2" name="Select10">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
      <label for="rollerdoorleft9"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
      <label for="rollerdoorleft9"></label>
              Right
      <input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
      <label for="rollerdoorleft9"></label>
            </p></td>
          <td><div align="center"><img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls3" /></div></td>
          </tr>
        <tr>
          <td height="219" class="auto-style2"><p class="auto-style2"><strong>Left of Shed</strong></p>
            <p>Rollerdoors
              <?php
    echo '<select name="rollerdoorleft">'; 
    echo '<option value="">--Select--</option>'; 
    while($opt = mysql_fetch_array($resultOptions3)) 
    { 
    echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>'; 
    } 
    echo '</select>'; 
    
    ?>
              Left
      <input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
      <label for="rollerdoorleft4"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
      <label for="rollerdoorleft4"></label>
              Right
      <input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
      <label for="rollerdoorleft4"></label>
            </p>
            <p>PA Doors
              <select class="auto-style2" name="Select8">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
      <label for="rollerdoorleft5"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
      <label for="rollerdoorleft5"></label>
              Right
      <input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
      <label for="rollerdoorleft5"></label>
            </p>
            <p>Windows
              <select class="auto-style2" name="Select12">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
      <label for="rollerdoorleft6"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
      <label for="rollerdoorleft6"></label>
              Right
      <input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
      <label for="rollerdoorleft6"></label>
            </p></td>
          <td class="auto-style2"><img src="images/ROOFCC.png" alt="" name="front" id="sides3" /><img src="images/side.png" alt="" name="sides id="sides1" /></td>
          <td colspan="2" class="auto-style2">&nbsp;</td>
        </tr>
        <tr>
          <td class="auto-style2"><p class="auto-style2"><strong>Right of Shed</strong></p>
            <p>Rollerdoors
              <?php
    echo '<select name="rollerdoorright">'; 
    echo '<option value="">--Select--</option>'; 
    while($opt = mysql_fetch_array($resultOptions)) 
    { 
    echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>'; 
    } 
    echo '</select>'; 
    
    ?>
              Left
      <input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
      <label for="rollerdoorleft11"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
      <label for="rollerdoorleft11"></label>
              Right
      <input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
      <label for="rollerdoorleft11"></label>
            </p>
            <p>PA Doors
              <select class="auto-style2" name="Select7">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
      <label for="rollerdoorleft10"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
      <label for="rollerdoorleft10"></label>
              Right
      <input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
      <label for="rollerdoorleft10"></label>
            </p>
            <p>Windows
              <select class="auto-style2" name="Select11">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
              Left
      <input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
      <label for="rollerdoorleft12"></label>
              Centre
      <input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
      <label for="rollerdoorleft12"></label>
              Right
      <input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
      <label for="rollerdoorleft12"></label>
            </p></td>
          <td class="auto-style2"><img src="images/ROOFCC.png" alt="" name="roofing" id="roofing" /><img src="images/side.png" alt="" name="front" id="sides2" /></td>
          <td colspan="2" class="auto-style2">&nbsp;</td>
        </tr>
        <tr>
          <td class="auto-style2"><p><strong>Lean To Options:</strong></p>
            <p>Left side of shed
              <input type="checkbox" name="leantoleft" id="leantoleft" />
              <label for="leantoleft"></label>
            </p>
            <p>Right Side of shed
              <input type="checkbox" name="leantoright" id="leantoright" />
              <label for="leantoright"></label>
            </p></td>
          <td class="auto-style2"><p align="center"><strong>Garaport Options:</strong></p>
            <p align="center">Front of Shed
              <input type="checkbox" name="garaportfront" id="garaportfront" />
              <label for="garaportfront"></label>
            </p>
            <p align="center">Back of Shed
              <input type="checkbox" name="garaportrear" id="garaportrear" />
              <label for="garaportrear"></label>
            </p></td>
          <td colspan="2" class="auto-style2"><p>&nbsp;</p></td>
          </tr>
      </table></td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <form method="post">
      <p>
        <input class="auto-style2" name="Submit1" type="submit" value="save" />
      </p>
    </form>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts


    that's alot of html to wade through.

    if you are doing the same thing various times you can use the same function. It is kept independent by the fact that you feed different variables into it.

    the code that I gave you should work - your elements have ids that match the code that calls them. It must be something else, but I can't see it. With this much code, a live page is easier to debug. You wouldn't happen to have a link, would you?


  •  

    Posting Permissions

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