Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

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.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>



Thanks Experts!
0
BendOverIGotYourBack
Asked:
BendOverIGotYourBack
  • 6
  • 4
  • 2
1 Solution
 
archrajanCommented:
<select onchange = "document.getElementById('pic').src = 'this.value'">
<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">
0
 
ZvonkoSystems architectCommented:
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">

0
 
BendOverIGotYourBackAuthor Commented:
Thanks for the reply archrajan.  Unfortunatley, the picture still doesn't change in Firefox and produces a runtime error in IE 6.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ZvonkoSystems architectCommented:
Sorry, I copied archrajan's typo :)


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

0
 
BendOverIGotYourBackAuthor Commented:
Zvonko, thanks for the reply.  I ran into the same issues as w/ archrajan's suggestion.
0
 
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function doit(obj)
{
var temp = obj.options[obj.selectedIndex].value
document.getElementById('pic').src = temp;
}
</script>
</HEAD>

<BODY>
 <select onchange = "doit(this)">
<option value = "http://www.experts-exchange.com/images/pe/344311.jpg">pic1</option>
<option value = "http://www.experts-exchange.com/images/certification.gif">pic2</option>
<option value = "http://www.experts-exchange.com/images/logoTopLeft.gif">pic3</option>
</select>
<img id = "pic" src = "http://www.experts-exchange.com/images/pe/344311.jpg">
</BODY>
</HTML>
0
 
archrajanCommented:
sorry for the first post, that had few issues which i corrected and posted a working example abpve
0
 
BendOverIGotYourBackAuthor Commented:
Archrajan,

Works great this time in IE 6, but not in Firefox =(
0
 
archrajanCommented:
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
0
 
archrajanCommented:
0
 
BendOverIGotYourBackAuthor Commented:
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!
0
 
archrajanCommented:
U are welcome, thanks for the points and the grade
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now