BendOverIGotYourBack
asked on
Drop Down Selection - Change Image
What I would like is for an Image to be displayed when an option is selected from a drop-down menu. For example, the menu has Pic1,Pic2,Pic3. When a person chooses Pic2, then Pic2 is displayed automatically w/out having to send to another page.
I found the code below at http://www.javascriptkit.com/script/cut173.shtml . Works great, but only in Internet Explorer. Does anyone know of a solution that will support IE and Mozilla (Firefox)?
<script language="javascript">
<!--
/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
function showimage()
{
if (!document.images)
return
document.images.pictures.s
document.mygallery.picture
}
//-->
</script>
Thanks Experts!
I found the code below at http://www.javascriptkit.com/script/cut173.shtml . Works great, but only in Internet Explorer. Does anyone know of a solution that will support IE and Mozilla (Firefox)?
<script language="javascript">
<!--
/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
function showimage()
{
if (!document.images)
return
document.images.pictures.s
document.mygallery.picture
}
//-->
</script>
Thanks Experts!
Or like this:
<select onchange = "document.images.pic.src = 'this.value'">
<option value = "pic1.jpg">pic1</option>
<option value = "pic2.jpg">pic2</option>
<option value = "pic3.jpg">pic3</option>
</select>
<img name="pic1" src="pic1.jpg">
<select onchange = "document.images.pic.src = 'this.value'">
<option value = "pic1.jpg">pic1</option>
<option value = "pic2.jpg">pic2</option>
<option value = "pic3.jpg">pic3</option>
</select>
<img name="pic1" src="pic1.jpg">
ASKER
Thanks for the reply archrajan. Unfortunatley, the picture still doesn't change in Firefox and produces a runtime error in IE 6.
Sorry, I copied archrajan's typo :)
<select onchange = "document.images.pic.src=t
<option value = "pic1.jpg">pic1</option>
<option value = "pic2.jpg">pic2</option>
<option value = "pic3.jpg">pic3</option>
</select>
<img name="pic1" src="pic1.jpg">
<select onchange = "document.images.pic.src=t
<option value = "pic1.jpg">pic1</option>
<option value = "pic2.jpg">pic2</option>
<option value = "pic3.jpg">pic3</option>
</select>
<img name="pic1" src="pic1.jpg">
ASKER
Zvonko, thanks for the reply. I ran into the same issues as w/ archrajan's suggestion.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
sorry for the first post, that had few issues which i corrected and posted a working example abpve
ASKER
Archrajan,
Works great this time in IE 6, but not in Firefox =(
Works great this time in IE 6, but not in Firefox =(
It works in firefox for me..
i tried in firefox and it works and there is no error in the javascript console
make sure u have the exact code
i tried in firefox and it works and there is no error in the javascript console
make sure u have the exact code
ASKER
Archrajan, I owe you an apology. In my Firefox options, I had turned off hte options for javascript to swap images (the previous examples still didn't work, but your last example did).
Thanks and I'm sorry for the confusion!
Thanks and I'm sorry for the confusion!
U are welcome, thanks for the points and the grade
<option value = "pic1.jpg">pic1</option>
<option value = "pic2.jpg">pic2</option>
<option value = "pic3.jpg">pic3</option>
</select>
<img id = "pic1" src = "pic1.jpg">