29 Replies Latest reply on Feb 24, 2014 7:46 AM by tutorialspark

    Change image when form dropdown list value is selected

    soulfunkifiedjazz Level 1

      I really thought this would be simpler but I just can't get it working.

       

      I have a submit from from paypal with a dropdown list. The list allows you to select color. I want to change an image on the page to display the appropriate color when the color is selected from the drop down list. So a black image shows up when black is selected, a red when red - etc...

       

      I would be very grateful if someone can share some succinct, browser compatible code. Thank you so much for any help you can provide.

       

      Bill

        • 1. Re: Change image when form dropdown list value is selected
          soulfunkifiedjazz Level 1

          another possible solution: I basically want both the selected value and the image to change from one single event. So if I publish a small color swatch image, I can use swap image to change the product picture when the swatch is picked. I thought I could use change properties to also update the value listed in the dropdown list at the same time. I want the product image to match the selected value in the list, so if an event outside of the form, like selecting a color swatch could control both things I would be happy with that. I know the swap image part, but can not figure out how to change the selected value in the dropdown.

          • 2. Re: Change image when form dropdown list value is selected
            E. Michael Brandt Level 4

            You are correct that this is not quite as simple as you might think at first.  You asked for succinct, but there are several steps involved, in Code View (horrors!)

             

            1) First add this script just before the closing head tag ( </head> ) on your page and then insert all your path/imagenames where you see mine.  Notice the ORDER of the IMAGES must correspond to the order you want them to be called by the Select dropdown in your form!:

             

            <script type="text/javascript">
            <!--
            function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com
               
                var imgs=["images/pic01.jpg","images/pic02.jpg","images/pic03.jpg"];
               
                var d=document;
                theValue=imgs[theValue];
                if (!theValue || !d.getElementById ) return;
                var obj = d.getElementById(objId);
                if (obj) obj.src=theValue;   
            }
            </script>

             

             

            2) Second, in your form, add the onchange event shown below to the <select> tag.  Note that in this example the ID on the <img> tag we'll be working with is "theImg" ,  Change that as needed.  If youdo not already have an ID on the <img> tag (see farther below), simply use "theImg"

             

            So here is a form with a select field.  Use whatever values you need for this, simply add my onchange event as shown:


            <form name="form1" method="post" action="">
              <select name="productColors" id="productColors" onchange="diva_imgBySel('theImg',this.selectedIndex)">
                <option value="x">xx</option>
                <option value="y">yy</option>
                <option value="z">zz</option>
              </select>
              <img src="pic99.jpg" alt="anAlt" name="theImg" width="200" height="200" id="theImg">
            </form>

             

            3) Finally you may want to click on the <body> tag, then go to the Tag/Behaviors window, click its + plus sign, and choose "Preload Images" and add all the imagenames so they will appear more quickly when the select list is used.

             

            Hope that all makes sense.

             

            -- 

            E. Michael Brandt

            www.divahtml.com
            www.divahtml.com/products/scripts_dreamweaver_extensions.php
            Standards-compliant scripts and Dreamweaver Extensions

            www.valleywebdesigns.com/vwd_Vdw.asp
            JustSo PictureWindow
            JustSo PhotoAlbum, et alia

            --
            • 3. Re: Change image when form dropdown list value is selected
              soulfunkifiedjazz Level 1

              That works great. Thanks so much. I totally over complicated the code and embarrased by how straight forward you made this work. I really appreciate your timely input and succinct solution. Be well.

               

              Bill C

              • 4. Re: Change image when form dropdown list value is selected
                E. Michael Brandt Level 4

                Always happy to help.

                 

                I just realized that the code could be improved just a bit by moving the array outside the function thusly.  In doing so, since we are exposing the variable to the global namespace, I thought it best to rename it a tad, so you'll need to update the variable's name in the function as well (from "imgs" to "sel_imgs" .  Thus:

                 

                <script type="text/javascript">
                <!--

                var sel_imgs=["images/pic01.jpg","images/pic02.jpg","images/pic03.jpg"]; /* this array is now a global */

                 

                function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com 
                    var d=document;
                    theValue=sel_imgs[theValue];
                    if (!theValue || !d.getElementById ) return;
                    var obj = d.getElementById(objId);
                    if (obj) obj.src=theValue;   
                }
                </script>

                 

                The reason this is better is that the array need be declared and populated only once.  As I had it before, it was being recreated each time the function was called.  Just a waste of cycles, but no other harm done.

                 

                -- 

                E. Michael Brandt

                www.divahtml.com
                www.divahtml.com/products/scripts_dreamweaver_extensions.php
                Standards-compliant scripts and Dreamweaver Extensions

                www.valleywebdesigns.com/vwd_Vdw.asp
                JustSo PictureWindow
                JustSo PhotoAlbum, et alia

                --
                1 person found this helpful
                • 5. Re: Change image when form dropdown list value is selected
                  soulfunkifiedjazz Level 1

                  Thanks, I appreciate the upgrade.

                   

                  Be well.

                  • 6. Re: Change image when form dropdown list value is selected
                    babyewok Level 1

                    Thanks for sharing this really useful bit of code.  I just wonder whether you could help me to expand it further.  I would like to use a light box for viewing the "theImg" image larger. Essentially, I just need to wrap it in an anchor tag, but the href will need to be updated at the same time as the source.  How can I do this?  As an example, the image would now look like this:

                     

                    <a href="images/large/pink.gif" rel="prettyPhoto"><img src="images/pink.gif" alt="anAlt" name="theImg" width="99" height="100" id="theImg"></a>

                     

                    Any ideas?

                    • 7. Re: Change image when form dropdown list value is selected
                      timlogochair Level 1

                      Is it possible to duplicate this script for three images on the same page?  What all would need to change in the script?

                      • 8. Re: Change image when form dropdown list value is selected
                        Nancy OShea Adobe Community Professional & MVP

                        Hi and welcome to the Adobe DW Forum.

                        This is a very old discussion from 2009.   For better replies, please start a new discussion in the web forum explaining exactly what you're trying to do and show us a link to your page. 

                         

                         

                        Thanks,

                        Nancy O.

                        • 9. Re: Change image when form dropdown list value is selected
                          timlogochair Level 1

                          Unfortunately, this isn't so much of a DW question (though I do use CS5).  I am simply using the script that E. Michael Brandt offered up in this thread exactly as he offered it.  I simply want to modify this function as necessary so I can use it (duplicate it) for use three times on the same page.

                           

                          I'd like to have an "image box" to correspond with drop down list for a "product line".  I'd like to have another "image box" that corresponds with another drop down list for "fabric color" (and loads that image in a separate IMG id.  And finally a third "image box" that corresponds with an "accent color" drop down list (that loads the appropriate image in a separate IMG id). 

                           

                          I've got the "Product Line" list and IMG tag all set up and working, just as described in the original post.

                           

                          The trouble is, I simply don't know what all needs to change in the function itself so that the three scripts (and lists/images) do not conflict with each other.

                           

                          This is the part I do not understand what to change for each version (fabric and accent colors) of the function:

                          theValue=imgs[theValue];
                          if (!theValue || !d.getElementById ) return;
                          var obj = d.getElementById(objId);
                          if (obj) obj.src=theValue; 
                          • 10. Re: Change image when form dropdown list value is selected
                            E. Michael Brandt Level 4

                            There are lots of ways to skin this cat, but here's one:

                             

                            in the head:

                             

                            in the body:

                              anAlt

                             

                              anAlt

                            </form>

                             

                            A demo of this code: http://valleywebdesigns.com/test.html

                             

                            Hope that helps.

                             

                            e michael brandt

                            • 11. Re: Change image when form dropdown list value is selected
                              E. Michael Brandt Level 4

                              oh well, guess the code is not being displayed, so just go to the demo page

                              and check the source code.

                               

                              e michael

                              • 12. Re: Change image when form dropdown list value is selected
                                timlogochair Level 1

                                Thanks so much.  I used your info from above and am in the process of creating a product configurator for our products.  Do you see any problems/issues etc or ways to make this script better?  I don't have most of the images there yet, but if you choose big boy chair and then choose navy/powder/black fabric and most accent colors you should see it working (in FireFox anyway).  Not sure why it isn't working in IE.  Any ideas?

                                 

                                Here's the link:

                                http://logochairs.com/j25cms/index.php/customform/test-form

                                 

                                 

                                And here's my code:

                                 

                                <script type="text/javascript">

                                <!--

                                function logo_prodImgBySel(objId,theValue) {

                                  

                                var cobaseimages=["/j25cms/images/customimages/blank.jpg","/j25cms/images/customimages/11/base.jpg", "/j25cms/images/customimages/12/base.jpg", "/j25cms/images/customimages/13/base.jpg", "/j25cms/images/customimages/15/base.jpg", "/j25cms/images/customimages/20/base.jpg", "/j25cms/images/customimages/23/base.jpg", "/j25cms/images/customimages/24/base.jpg", "/j25cms/images/customimages/25/base.jpg", "/j25cms/images/customimages/27/base.jpg", "/j25cms/images/customimages/32/base.jpg", "/j25cms/images/customimages/35/base.jpg", "/j25cms/images/customimages/39/base.jpg", "/j25cms/images/customimages/41/base.jpg", "/j25cms/images/customimages/42/base.jpg", "/j25cms/images/customimages/48/base.jpg", "/j25cms/images/customimages/50/base.jpg", "/j25cms/images/customimages/51/base.jpg", "/j25cms/images/customimages/52/base.jpg", "/j25cms/images/customimages/54/base.jpg", "/j25cms/images/customimages/56/base.jpg", "/j25cms/images/customimages/57/base.jpg", "/j25cms/images/customimages/58/base.jpg", "/j25cms/images/customimages/60/base.jpg", "/j25cms/images/customimages/62/base.jpg", "/j25cms/images/customimages/64/base.jpg", "/j25cms/images/customimages/65/base.jpg", "/j25cms/images/customimages/68/base.jpg", "/j25cms/images/customimages/69/base.jpg", "/j25cms/images/customimages/71/base.jpg", "/j25cms/images/customimages/72/base.jpg", "/j25cms/images/customimages/74/base.jpg", "/j25cms/images/customimages/77/base.jpg", "/j25cms/images/customimages/78/base.jpg", "/j25cms/images/customimages/79/base.jpg", "/j25cms/images/customimages/80/base.jpg", "/j25cms/images/customimages/82/base.jpg", "/j25cms/images/customimages/83/base.jpg", "/j25cms/images/customimages/84/base.jpg", "/j25cms/images/customimages/90/base.jpg", "/j25cms/images/customimages/94/base.jpg"];

                                 

                                    var d=document;

                                    theValue=cobaseimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                <!--

                                 

                                  

                                function logo_prodImgPrim(objId,theValue) {

                                  var coimageprimary1='/j25cms/images/customimages/';

                                var coimageprimary25= document.getElementById('ff_elem368');

                                var coimageprimary2= coimageprimary25.options[coimageprimary25.selectedIndex].value

                                var coimageprimary3='/primary/';

                                var ttt='Powder.png';

                                var mypath=(coimageprimary1 + coimageprimary2 + coimageprimary3);

                                 

                                  var coPrimaryimages=['/j25cms/images/customimages/blank.png',(mypath + 'White.png'),

                                (mypath + 'Black.png'),

                                (mypath + 'Lemon.png'),

                                (mypath + 'Yellow.png'),

                                (mypath + 'Gold.png'),

                                (mypath + 'Tangerine.png'),

                                (mypath + 'Rust.png'),

                                (mypath + 'Orange.png'),

                                (mypath + 'Carrot.png'),

                                (mypath + 'Red.png'),

                                (mypath + 'Cardinal.png'),

                                (mypath + 'Garnet.png'),

                                (mypath + 'Maroon.png'),

                                (mypath + 'Purple.png'),

                                (mypath + 'Powder.png'),

                                (mypath + 'Navy.png'),

                                (mypath + 'Royal.png'),

                                (mypath + 'Hunter.png'),

                                (mypath + 'Gray.png'),

                                (mypath + 'Charcoal.png'),

                                (mypath + 'Khaki.png'),

                                (mypath + 'Vegas.png'),

                                (mypath + 'Kelly.png'),

                                (mypath + 'Pink.png'),

                                ];   

                                    var d=document;

                                    theValue=coPrimaryimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                  <!--

                                 

                                  

                                function logo_prodImgSec(objId,theValue) {

                                  var coimagesecondary1='/j25cms/images/customimages/';

                                var coimagesecondary25= document.getElementById('ff_elem368');

                                var coimagesecondary2= coimagesecondary25.options[coimagesecondary25.selectedIndex].value

                                var coimagesecondary3='/accent/';

                                var ttt='Powder.png';

                                var mypathz=(coimagesecondary1 + coimagesecondary2 + coimagesecondary3);

                                 

                                  var coSecondaryimages=['/j25cms/images/customimages/blank.png',(mypathz + 'White.png'),

                                (mypathz + 'Black.png'),

                                (mypathz + 'Lemon.png'),

                                (mypathz + 'Yellow.png'),

                                (mypathz + 'Gold.png'),

                                (mypathz + 'Tangerine.png'),

                                (mypathz + 'Rust.png'),

                                (mypathz + 'Orange.png'),

                                (mypathz + 'Carrot.png'),

                                (mypathz + 'Red.png'),

                                (mypathz + 'Cardinal.png'),

                                (mypathz + 'Garnet.png'),

                                (mypathz + 'Maroon.png'),

                                (mypathz + 'Purple.png'),

                                (mypathz + 'Powder.png'),

                                (mypathz + 'Navy.png'),

                                (mypathz + 'Royal.png'),

                                (mypathz + 'Hunter.png'),

                                (mypathz + 'Gray.png'),

                                (mypathz + 'Charcoal.png'),

                                (mypathz + 'Khaki.png'),

                                (mypathz + 'Vegas.png'),

                                (mypathz + 'Kelly.png'),

                                (mypathz + 'Pink.png'),

                                ];   

                                    var d=document;

                                    theValue=coSecondaryimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                function clear_OnChange()

                                {

                                var combo = document.getElementById('ff_elemPriColor');

                                combo.selectedIndex = "0";

                                 

                                var combo2 = document.getElementById('ff_elemSecColor');

                                combo2.selectedIndex = "0";

                                 

                                 

                                </script>

                                <div id="product1image_a" style="position: relative; float: right; top: -20px; right: 0px; width: 250px; height: 250px; border: 2px solid darkgray; box-shadow: 5px 5px 5px rgb(136, 136, 136);">

                                  <img width="250" height="250" style="position:absolute;bottom:0px;right:0px;" id="theImg" src="images/customimages/blank.jpg" alt="" />

                                  <img id="thePrimary" style="position:absolute; bottom:0px; right:0px; width:250px;" src="images/customimages/blank.png">

                                  <img id="theAccent" style="position:absolute; top:0px; left:0px; width:250px;" src="images/customimages/blank.png">

                                </div>

                                 

                                ----------------------------------------

                                <span id="bfElemWrap368" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabel368" for="ff_elem358">Product Line</label>

                                <select id="ff_elem368" name="ff_nm_prod1[]" onchange="logo_prodImgBySel('theImg',this.selectedIndex);clear_OnChange();logo_prodImgPrim('thePrim ary',this.selectedIndex);logo_prodImgSec('theAccent',this.selectedIndex);" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="11">Big Boy Chair</option>

                                <option value="12">Deluxe Chair</option>

                                <option value="13">Canvas Chair</option>

                                <option value="15">Sphere Chair</option>

                                <option value="20">Toddler Chair</option>

                                <option value="23">Classic Fleece</option>

                                <option value="24">Sherpa Throw</option>

                                <option value="25">Fleece Throw</option>

                                <option value="27">UltraSoft Blanket</option>

                                <option value="32">Tailgate Table</option>

                                <option value="35">Trashcan Cooler</option>

                                <option value="39">Economy Tent</option>

                                <option value="41">Color Tent</option>

                                <option value="42">Checkerboard Tent</option>

                                <option value="48">Side Panel</option>

                                <option value="50">12 Pack Cooler</option>

                                <option value="51">Luggage Set</option>

                                <option value="52">Rolling Duffel</option>

                                <option value="54">Sport Duffel</option>

                                <option value="56">Lunch Pail</option>

                                <option value="57">Rolling Cooler</option>

                                <option value="58">Party Bucket</option>

                                <option value="60">Picnic Cooler</option>

                                <option value="62">Backpack</option>

                                <option value="64">String Pack</option>

                                <option value="65">Reversible Tote</option>

                                <option value="68">Seat Blanket Combo</option>

                                <option value="69">Stadium Seat with Arms</option>

                                <option value="71">Stadium Cushion</option>

                                <option value="72">Gym Bag</option>

                                <option value="74">Sweatshirt Blanket</option>

                                <option value="77">Round Coozie</option>

                                <option value="78">Flat Coozie</option>

                                <option value="79">Bottle Coozie</option>

                                <option value="80">Stadium Seat</option>

                                <option value="82">8-Can Cooler Tote</option>

                                <option value="83">16-Can Cooler Tote</option>

                                <option value="84">30-Can Cooler Tote</option>

                                <option value="90">Camping Stool</option>

                                <option value="94">Hardback Seat</option>

                                  </span>

                                </select>

                                ---------------------------------------------------------------

                                <span id="bfElemWrapPriColor" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabelPriColor" for="ff_elemPriColor">Primary Fabric</label>

                                <select id="ff_elemPriColor" name="ff_nm_prodcolor[]" onchange="logo_prodImgPrim('thePrimary',this.selectedIndex)" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="White">White</option>

                                <option value="Black">Black</option>

                                <option value="Lemon">Lemon</option>

                                <option value="Yellow">Yellow</option>

                                <option value="Gold">Gold</option>

                                <option value="Tangerine">Tangerine</option>

                                <option value="Rust">Rust</option>

                                <option value="Orange">Orange</option>

                                <option value="Carrot">Carrot</option>

                                <option value="Red">Red</option>

                                <option value="Cardinal">Cardinal</option>

                                <option value="Garnet">Garnet</option>

                                <option value="Maroon">Maroon</option>

                                <option value="Purple">Purple</option>

                                <option value="Powder">Powder</option>

                                <option value="Navy">Navy</option>

                                <option value="Royal">Royal</option>

                                <option value="Hunter">Hunter</option>

                                <option value="Gray">Gray</option>

                                <option value="Charcoal">Charcoal</option>

                                <option value="Khaki">Khaki</option>

                                <option value="Vegas">Vegas</option>

                                <option value="Kelly">Kelly</option>

                                <option value="Pink">Pink</option>

                                 

                                  </span>

                                </select>

                                -----------------------------------------------------------

                                <span id="bfElemWrapSecColor" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabelSecColor" for="ff_elemSecColor">Accent Color</label>

                                <select id="ff_elemSecColor" name="ff_nm_seccolor[]" onchange="logo_prodImgSec('theAccent',this.selectedIndex)" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="White">White</option>

                                <option value="Black">Black</option>

                                <option value="Lemon">Lemon</option>

                                <option value="Yellow">Yellow</option>

                                <option value="Gold">Gold</option>

                                <option value="Tangerine">Tangerine</option>

                                <option value="Rust">Rust</option>

                                <option value="Orange">Orange</option>

                                <option value="Carrot">Carrot</option>

                                <option value="Red">Red</option>

                                <option value="Cardinal">Cardinal</option>

                                <option value="Garnet">Garnet</option>

                                <option value="Maroon">Maroon</option>

                                <option value="Purple">Purple</option>

                                <option value="Powder">Powder</option>

                                <option value="Navy">Navy</option>

                                <option value="Royal">Royal</option>

                                <option value="Hunter">Hunter</option>

                                <option value="Gray">Gray</option>

                                <option value="Charcoal">Charcoal</option>

                                <option value="Khaki">Khaki</option>

                                <option value="Vegas">Vegas</option>

                                <option value="Kelly">Kelly</option>

                                <option value="Pink">Pink</option>

                                 

                                  </span>

                                </select>