Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

Q1529 How do I display an image based on the options selected from 3 different menus on the same page?

You are here: irt.org | FAQ | JavaScript | Image | Q1529 [ previous next ]

Try:

<form onSubmit="return false">
<select name="hair">
<option value="">Hair color</option>
<option value="a">Brown</option>
<option value="b">Blonde</option>
<option value="c">Red</option>
<option value="d">Black</option>
</select>
<select name="skin">
<option value="">Skin color</option>
<option value="a">Brown</option>
<option value="b">White</option>
<option value="c">Red</option>
<option value="d">Yellow</option>
</select>
<select name="fabric">
<option value="">Fabric</option>
<option value="a">Brown</option>
<option value="b">White</option>
<option value="c">Purple</option>
<option value="d">Puce</option>
</select>
<input type="button"
onClick="
imageName = this.form.hair.value + this.form.skin.value+this.form.fabric.value;
if (imageName.length < 3) {
   alert('Please select something from all three options');
}
else {
   if (document.images)  document.images['doll'].src= imageName+'.gif'; // ie4+ ns3+
   else window.open(imageName+'.gif','newimage','width=300,height=400'); // ie3+
}" VALUE="GO!">
</form>
<img name="doll" src="blank.gif">

Now have images called: aaa.gif, aba.gif, aab.gif, abb.gif and so on.

©2018 Martin Webb