Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dropdown Image and Description display

Status
Not open for further replies.
Killborg

Killborg

Technical User
Jul 16, 2007
46
US
Hello
I am trying to figure how to make a image display with a text description when the item is selected from a dropdown.

I have gotten the image to display when you select it from a dropdown but I cannot figure out how to make the description change when the image changes. The description shows but does not change.

If I use this I can get the description to change but the image will not.: <select name="borders" size="1" onChange="displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')">



<!--Example drop down menu 1-->

<form name="CanadaGallery">
<select name="borders" size="1" onChange="displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')">
<option value="sd" selected="selected">Color 1</option>
<option>Color 2</option>
<option>Color 3</option>
<option>Color 4</option>
<option>Color 5</option>
</select>
<table width="819" height="62" border="0" cellpadding="0" cellspacing="0">
<tr>
<td scope="col"><span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
var thetext1=new Array()
thetext1[0]="Selection 1"
thetext1[1]="<strong>Linen: </strong>with Heat Sensitive Ink<br><strong>Color: </strong>Process Blue<br><strong>Available Formats: </strong>Compact</br>"
thetext1[2]="Selection 3"
thetext1[3]="Selection 4"
thetext1[4]="Selection 5"

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')
</script>
</form>
</p>
</body>
</html>

Can anyone help me figure this out.
Thanks for the help in advance.
Art
 
Sort by date Sort by votes
I see nothing image related here at all, so couldn't possibly comment on how to fix something we know nothing about.

Generically, however, if you want to perform more than 1 action 'onchange', then simply put more code in the 'displaydesc' function.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Sorry I was trying to make a fix and made a change. But here is the one with the image selection.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Border</title>
<style type="text/css">
<!--
#CanBorder {
position:absolute;
left:292px;
top:53px;
width:600;
height:100;
z-index:1;
}
#CanPanta {
position:absolute;
left:292px;
top:53px;
width:600;
height:100;
z-index:1;
}
body {
margin-left: 30px;
margin-top: 30px;
}
-->
</style>
<script language="javascript"><!--
function showimage()
{
if (!document.images)
return
document.images.border_pics.src=
document.CanadaGallery.borders.options[document.CanadaGallery.borders.selectedIndex].value
}
//--></script>
</head>

<body>
<div id="CanBorder"><a href="document.CanadaGallery.borders.selectedIndex"><img src="Border.png" name="border_pics" width="100" height="100" border=0 id="border_pics" /></a></div>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<form id="CanadaGallery" name="CanadaGallery" action="">
<select name="borders" size="1" onchange="showimage()""displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')">
<option value="Border.png">Select a Border</option>
<option value="Red.png">Red</option>
<option value="Green.png">Green</option>
<option value="Blue.png">Blue</option>
<option value="Yellow.png">Yellow</option>
</select>
<table width="252" height="62" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="553" scope="col"><span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
var thetext1=new Array()
thetext1[0]="Selection 1"
thetext1[1]="<strong>Linen: </strong>with Heat Sensitive Ink<br><strong>Color: </strong>Process Blue<br><strong>Available Formats: </strong>Compact</br>"
thetext1[2]="Selection 3"
thetext1[3]="Selection 4"
thetext1[4]="Selection 5"

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')
</script>
</form> </td>
</tr>
<tr>
<td width="600">&nbsp;</td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Try changing :

<select name="borders" size="1" onchange="showimage()""displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1')">

to

<select name="borders" size="1" onchange="showimage();displaydesc(document.CanadaGallery.borders, thetext1, 'textcontainer1');">

or move the displaydesc function into the showimage function.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
276
TheLazyPig
TheLazyPig
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
276
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
303
AbidingDude
AbidingDude
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
177
berkshirea
berkshirea
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
223
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top