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 Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Change image based on multiple select options

    Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

    I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

    The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

    If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    hello,

    one question that may simplify this - are all the heights unique? ie, are there two photos which have the same height but different widths?

    actually, if you can give a list of the possible combinations that will probably be useful, rather than just dummying something up - something like:

    width:heights
    12: 30, 36, 42
    18: 40, 46,52

    etc

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Question Several questions

    Provide a list of the height - width and image combinations
    and a possible link to the images.

    About how many combination and images do you have,
    as well as if there are any multiples of the combinations.

    Do you really need 2 select boxes or will a single list work as well?

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi thanks for your response.

    I'm sorry I should of provided more details. No, not all the heights are unique, in fact many of the combinations would result in the same image displaying, I really should of mentioned that.

    The widths with corresponding heights available:

    W - H
    12 - 30, 36, 42
    15 - 30, 36, 42
    18 - 30, 36, 42
    21 - 15, 18, 30, 36, 42
    24 - 15, 18, 30, 36, 42
    27 - 30, 36, 42
    30 - 12, 15, 18, 21, 24, 27, 30, 36, 42
    33 - 12, 15, 18, 24, 27, 30, 36, 42
    36 - 12, 15, 18, 24, 30, 36, 42
    39 - 30, 42
    42 - 30, 42
    48 - 30
    54 - 30
    60 - 30


    As i mentioned several of the width and height combinations will display the same image. There are a few exceptions. I tried to list all the combinations that point to the related image.

    I listed the heights first in the this case (since they would of repeated often) followed by the possible widths for that image.

    image-01
    12h - 30,33,36w

    image-02
    15h - 21,24,30,30,33,36w

    image-03
    18h - 21,24,30,33,36w

    image-04
    21h - 30w

    image-05
    24h - 24,30,,33,36w

    image-06
    27h - 30w

    image-07
    30h - 9,12,15,18,21w
    36h - 9,12,15,18,21,36w

    image-08
    30h - 24,27,30,33,36,39,42w
    36h - 24,27,30,33,36w

    image-09
    30h - 45,48,54w

    image-10
    30h - 60w

    image-11
    42h - 9,12,15,18,21w

    image-12
    42h - 24,27,30,33,36,39w

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Provide a list of the height - width and image combinations
    and a possible link to the images.

    About how many combination and images do you have,
    as well as if there are any multiples of the combinations.

    Do you really need 2 select boxes or will a single list work as well?
    Hey I just posted the info. I don't have links to the images at the moment. The idea was to have two so the user would first pick a width and then a height option, thus the image would update.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think this works - give it a try. You need to change the names of the pics in the if statements to your image file paths:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
    <title>Dynamic Select Statements</title>
    <script type="text/javascript">
    //<![CDATA[
    // array of possible widths in the same order as they appear in the width selection list
    var widthLists = new Array(4)
    widthLists["empty"] = ["Select a Country"];
    widthLists["12"] = ["30", "36", "42"];
    widthLists["15"] = ["30", "36", "42"];
    widthLists["18"] = ["30", "36", "42"];
    widthLists["21"]= ["15","18","30", "36", "42"];
    widthLists["24"]= ["15","18","30", "36", "42"];
    widthLists["27"]= ["30", "36", "42"];
    widthLists["30"]= ["12", "15","18","21","24","27","30", "36", "42"];
    widthLists["33"]= ["12", "15","18","24","27","30", "36", "42"];
    widthLists["36"]= ["12", "15","18","24","30", "36", "42"];
    widthLists["39"]= ["30","42"];
    widthLists["42"]= ["30","42"];
    widthLists["48"]= ["30"];
    widthLists["54"]= ["30"];
    widthLists["60"]= ["30"];
    
    
    
    /* heightChange() is called from the onchange event of a select element.
     * param selectObj - the select object which fired the on change event.
     */
    function heightChange(selectObj) {
    	// get the index of the selected option
    	var idx = selectObj.selectedIndex;
    	// get the value of the selected option
    	var which = selectObj.options[idx].value;
    	// use the selected option value to retrieve the list of items from the heightLists array
    	cList = widthLists[which];
    	// get the height select element via its known id
    	var cSelect = document.getElementById("height");
    	// remove the current options from the height select
    	var len=cSelect.options.length;
    	while (cSelect.options.length > 0) {
    		cSelect.remove(0);
    	}
    	var newOption;
    	// create new options
    	for (var i=0; i<cList.length; i++) {
    		newOption = document.createElement("option");
    		newOption.value = cList[i];  // assumes option string and value are the same
    		newOption.text=cList[i];
    		// add the new option
    		try {
    			cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
    		}
    		catch (e) {
    			cSelect.appendChild(newOption);
    
    		}
    	}
    }
    //]]>
    
    function showPic(){
    widthbox=document.getElementById("width")
    var thewidth = Number(widthbox.options[widthbox.selectedIndex].value);
    heightbox=document.getElementById("height")
    var theheight = Number(heightbox.options[heightbox.selectedIndex].value);
    	if ((theheight==12)&&(thewidth==30||33||36)){				
    					pic="image-01"
    					} else if ((theheight==15)&&(thewidth==21||24||30||33||36)){				
    					pic="image-02"
    					} else if ((theheight==18)&&(thewidth==21||24||30||33||36)){				
    					pic="image-03"
    					} else if ((theheight==21)&&(thewidth==30)){				
    					pic="image-04"
    					} else if ((theheight==24)&&(thewidth==24||30||33||36)){				
    					pic="image-05"
    					} else if ((theheight==27)&&(thewidth==30)){				
    					pic="image-06"
    					} else if ((theheight==30)&&(thewidth==24||27||30||33||36||39||42)){				
    					pic="image-07"
    					} else if ((theheight==36)&&(thewidth==24||27||30||33||36)){				
    					pic="image-07"
    					} else if ((theheight==30)&&(thewidth==45||48||49)){				
    					pic="image-09"
    					} else if ((theheight==30)&&(thewidth==60)){				
    					pic="image-10"
    					} else if ((theheight==42)&&(thewidth==9||12||15||18||21)){				
    					pic="image-11"
    					} else if ((theheight==42)&&(thewidth==24||27||30||36||39)){				
    					pic="image-12"
    					} 
    					document.getElementById("thediv").style.display="block";
    					document.getElementById("thepic").src=pic; 
    	}				
    </script>
    </head>
    <body>
    <label for="width">Select a width</label>
    <select id="width" onchange="heightChange(this);">
    <option value="empty">Select a width</option>
    <option value="12">12</option>
    <option value="15">15</option>
    <option value="18">18</option>
    <option value="21">21</option>
    <option value="24">24</option>
    <option value="27">27</option>
    <option value="30">30</option>
    <option value="33">33</option>
    <option value="36">36</option>
    <option value="39">39</option>
    <option value="42">42</option>
    <option value="48">48</option>
    <option value="54">54</option>
    <option value="60">60</option>
    </select>
    <br />
    <label for="height">Select a height</label>
    <select id="height" onchange="showPic()">
    <option value="0">Select a height</option>
    </select>
    <div id="thediv" style="display:none">
    <img src="" id="thepic">
    </div>
    </body>
    
    </html>

  • Users who have thanked xelawho for this post:

    Swade (01-07-2012)

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    xelawho, you are the man! I can't express how thankful I am. I tested it out and it works just right. Really appreciate you taking time out your day to help me.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb An alternative attempt.

    Alternate solution...
    Adds some of the size choices without all the if..elseif statements.
    Code:
    <!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>
    <title>2-level Drop Down Selection</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=223096
    // Modified for: http://www.codingforums.com/showthread.php?p=1178267#post1178267
    
    //  [h,  [w],   image-#]
    var selOptions = [
        ['12_', '30','33','36'],                     	// image-01
        ['15_', '21','24','30','30','33','36'],      	// image-02
        ['18_', '21','24','30','33','36'],           	// image-03
        ['21_', '30'],                               	// image-04
        ['24_', '24','30','33','36'],                	// image-05
        ['27_', '30'],                               	// image-06
        ['30a', '9','12','15','18','21'],            	// image-07
        ['30b', '24','27','30','33','36','39','42'], 	// image-08
        ['30c', '45','48','54'],                     	// image-09
        ['30d', '60', '25.jpg'],                     	// image-10
        ['36a', '9','12','15','18','21','36'],       	// image-07
        ['36b', '24','27','30','33','36'],           	// image-08
        ['42a', '9','12','15','18','21'],            	// image-11
        ['42b', '24','27','30','33','36','39']       	// image-12
    ];
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var selOptionsImages = [ '', // zero element not used
    	'11.jpg','21.jpg','31.jpg','41.jpg','51.jpg','12.jpg',
    	'22.jpg','23.jpg','24.jpg','25.jpg','22.jpg','23.jpg','31.jpg','32.jpg'];
    // match number of images to number of options above.
    // select image that relates to height-width group to display
    var oSel1, oSel2;
    
      function setSel2Options(obj){
        oSel2.options.length = 0;
        if (obj.selectedIndex == 0) { return; }
        for( i=0; i < selOptions.length; i++) {
          if (obj.value == selOptions[i][0]) {
            oSel2.options[oSel2.options.length] = new Option('Width',false,false);
    		for (j=1; j < selOptions[i].length; j++) {  
              oSel2.options[oSel2.options.length] = new Option(selOptions[i][j],selOptions[i][j],false,false);
            }
            i = selOptions.length;
          }
        }
      }
    
      window.onload=function() {
    	oSel1 = document.getElementById('sel1');
    	oSel2 = document.getElementById('sel2');
        for (i=0; i < selOptions.length; i++) {
    	  tmpV = selOptions[i][0];
    	  tmpD = tmpV.substring(0,tmpV.length-1);
          oSel1.options[oSel1.options.length] = new Option(tmpD,tmpV, false,false);
        }
        oSel1.onchange=function(){setSel2Options(this);}
      }
      
      function saveSelOptions() {
    	var N = Number(oSel1.selectedIndex);
    	document.getElementById('pics').src = baseURL+selOptionsImages[N];
      }
      
    </script>
    </head>
    <body>
     <table border="0"><tr><td>Height<//td><td>Width</td></tr>
     <tr><td>
      <select id="sel1"><option value="">Height</option></select>
     </td><td>
      <select id="sel2" onchange="saveSelOptions()"><option value="">Width</option></select>
     </td></tr></table>
      <br><img id="pics" src="">
    </body>
    </html>
    You will need to substitute your own images for the various size groups.

  • Users who have thanked jmrker for this post:

    Swade (01-08-2012)

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    jmrker, thank you for providing another possible solution. Wasn't expecting to get great examples so quickly. Thanks again!!


  •  

    Tags for this Thread

    Posting Permissions

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