...

View Full Version : Change image based on multiple select options



Swade
01-07-2012, 07:12 AM
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/working-examples/SCR19/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.

xelawho
01-07-2012, 02:59 PM
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

jmrker
01-07-2012, 04:56 PM
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?

Swade
01-07-2012, 06:46 PM
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

Swade
01-07-2012, 06:50 PM
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.

xelawho
01-07-2012, 07:46 PM
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:



<?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>

Swade
01-07-2012, 08:28 PM
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.

jmrker
01-08-2012, 04:46 AM
Alternate solution...
Adds some of the size choices without all the if..elseif statements.


<!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.

Swade
01-08-2012, 05:39 PM
jmrker, thank you for providing another possible solution. Wasn't expecting to get great examples so quickly. Thanks again!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum