Page 1 of 1
new image for each drop box value
Posted: Wed Jun 04, 2008 1:07 pm
by cow8boi8
I was hoping if someone could help me with some code that I am getting stuck on. What I need to happen is have different images be shown for each drop down box. For example, the image of an "A" should be shown when the drop down box is set to "A" and have the same thing for "B" etc. Also, I have a total price that is displayed at the bottom of the page. When "A" is selected the total price would then need to be changed to 10, (10 being the value of "A") and when "B" is selected it would be a value of 17.
Thanks!
Re: new image for each drop box value
Posted: Wed Jun 04, 2008 4:21 pm
by califdon
cow8boi8 wrote:I was hoping if someone could help me with some code that I am getting stuck on. What I need to happen is have different images be shown for each drop down box. For example, the image of an "A" should be shown when the drop down box is set to "A" and have the same thing for "B" etc. Also, I have a total price that is displayed at the bottom of the page. When "A" is selected the total price would then need to be changed to 10, (10 being the value of "A") and when "B" is selected it would be a value of 17.
Thanks!
Basically, you need a Javascript function that responds to the OnChange event of the dropdown box. The function would set the value of the text box at the bottom of the page, and set the image to be displayed. You would have to create an array of appropriate values, or something, with PHP code when you generate the Javascript function.
Be aware of several hazards, though: if your dropdown box contains a large number of options, you could easily generate a monster of a page to load, due to loading all the images and prices. And to make it operate smoothly, you might need to preload the images, to avoid a delay in loading the images when you select different items in the dropdown box.
If you want to continue in this direction, let us know about how many items you might have, and the average size of each image file, in bytes.
Re: new image for each drop box value
Posted: Wed Jun 04, 2008 4:41 pm
by cow8boi8
There are 7 drop box choices and the first image is 300 bytes and they get smaller depending on the drop box
Re: new image for each drop box value
Posted: Wed Jun 04, 2008 5:19 pm
by califdon
cow8boi8 wrote:There are 7 drop box choices and the first image is 300 bytes and they get smaller depending on the drop box
Oh, that should be no problem. If you had 100 options and/or much larger images, you might not want to do it this way. I am going to just give you an off-the-top-of-my-head (which is bare, anyway!) Javascript/HTML snippet that I don't have time to check, but I think it would probably run okay:
Code: Select all
<script type="text/javascript">
function displaychoice(choice) {
switch (choice) {
case "1":
document.getElementById('myimg').src="img1.gif";
document.getElementById('mydiv').innerHtml="This is my text for option 1";
break;
case "2":
document.getElementById('myimg').src="img2.gif";
document.getElementById('mydiv').innerHtml="This is my text for option 2";
break;
...
...
case "7":
document.getElementById('myimg').src="img7.gif";
document.getElementById('mydiv').innerHtml="This is my text for option 7";
break;
}
}
</script>
...
<select id="ch" name="ch" onchange="displaychoice(this.value);">
<option value="1">A</option>
<option value="2">B</option>
...
<option value="7">G</option>
</select>
...
<img id="myimg" src="">
...
<div id="mydiv"></div>
...