[SOLVED] Change picture from dropdown

[jeffjohnvol]

I have a  "select" form dropdown that has between 1 and 20 images referenced.  I need the user to select the photo they want to display. 

 

I can let them see the photo via php when they hit "preview", but I would like to display the picture in a thumbnail on the form.  Is this easily done?

 

The current dropdown, which is based on a directory and built each time, looks like the following:

 

<td><select name = PrimaryPhoto><option value="none">No Photo</option>
<option  value="PICT1739.JPG">PICT1739.JPG: Kari</option>
<option  value="PICT1728.JPG">PICT1728.JPG: Dock view</option>
<option  value="PICT1714.JPG">PICT1714.JPG: picture title</option>
<option  value="PICT1731.JPG">PICT1731.JPG: picture title</option>
<option  value="PICT1740.JPG">PICT1740.JPG: picture title</option>
<option  value="PICT1741.JPG">PICT1741.JPG: picture title</option>
<option  value="PICT1742.JPG">PICT1742.JPG: picture title</option>
<option  value="PICT1743.JPG">PICT1743.JPG: picture title</option>
<option  value="PICT1765.JPG">PICT1765.JPG: picture title</option>
<option  value="PICT1766.JPG">PICT1766.JPG: picture title</option>
<option  value="PICT1767.JPG">PICT1767.JPG: picture title</option>
<option  value="PICT1768.JPG">PICT1768.JPG: picture title</option>
<option  value="PICT1769.JPG">PICT1769.JPG: picture title</option>
<option  value="PICT1773.JPG">PICT1773.JPG: picture title</option>
<option  value="PICT1774.JPG">PICT1774.JPG: picture title</option>
<option  value="PICT1775.JPG">PICT1775.JPG: picture title</option>
<option  value="arch.jpg">arch.jpg: picture title</option>
<option  value="back_porch2.jpg">back_porch2.jpg: picture title</option>
<option  value="bear4.jpg">bear4.jpg: picture title</option>
<option  value="j.txt">j.txt: picture title</option>
</select></td>

 

It should be simple, but I'm new to js.  Any help would be appreciated.

 

Thanks.

Jeff

[phpQuestioner]

<script language="javascript">
function getPic(picselection)
{
document.getElementById('pic').src = picselection;
}
</script>

<table>
<td><select name=PrimaryPhoto onchange="getPic(this.value)">
<option value="none">No Photo</option>
<option  value="PICT1739.JPG">PICT1739.JPG: Kari</option>
<option  value="PICT1728.JPG">PICT1728.JPG: Dock view</option>
<option  value="PICT1714.JPG">PICT1714.JPG: picture title</option>
<option  value="PICT1731.JPG">PICT1731.JPG: picture title</option>
<option  value="PICT1740.JPG">PICT1740.JPG: picture title</option>
<option  value="PICT1741.JPG">PICT1741.JPG: picture title</option>
<option  value="PICT1742.JPG">PICT1742.JPG: picture title</option>
<option  value="PICT1743.JPG">PICT1743.JPG: picture title</option>
<option  value="PICT1765.JPG">PICT1765.JPG: picture title</option>
<option  value="PICT1766.JPG">PICT1766.JPG: picture title</option>
<option  value="PICT1767.JPG">PICT1767.JPG: picture title</option>
<option  value="PICT1768.JPG">PICT1768.JPG: picture title</option>
<option  value="PICT1769.JPG">PICT1769.JPG: picture title</option>
<option  value="PICT1773.JPG">PICT1773.JPG: picture title</option>
<option  value="PICT1774.JPG">PICT1774.JPG: picture title</option>
<option  value="PICT1775.JPG">PICT1775.JPG: picture title</option>
<option  value="arch.jpg">arch.jpg: picture title</option>
<option  value="back_porch2.jpg">back_porch2.jpg: picture title</option>
<option  value="bear4.jpg">bear4.jpg: picture title</option>
<option  value="j.txt">j.txt: picture title</option>
</select></td>
</table>

<br><br>

<img id="pic">

[jeffjohnvol]

Thanks!  That did the trick, although I had to figure a few things out.  My image path wasn't in the root, so I had to add the url paths to get it to work.  It made me figure out how it worked though, so it was a good exercise.

 

One question though:  changing the dropdown changes the thumbnail as expected, but if I know what the default picture should be (initially) how do I set that photo initially?

[phpQuestioner]

<img id="pic" src="initial_picture.jpg">

[jeffjohnvol]

Thanks, that did the trick perfectly.

[phpQuestioner]

your welcome