Drop-down needs to change text...help!

tjc19999

12-30-2005, 05:14 AM

I have written this drop-down box so that it will change a picture, i would also like it to change text, or the description of the picture when changed. What I have so far is this:

<img name="test" src="http://www.leviathanpc.net/xasersilver.jpg" height="220" align="left"><form method="POST" name="description">
<p style="text-align: center; margin-left: 5; margin-top: 0">hello</p>
</form>
<p style="text-align: center; margin-left:5; margin-top:0">
<br>
</td>
</tr>
</table>
<div align="left">
<table width="590" height="78" border=0 bgcolor="#000000" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="100%">
<form name="dropform">

<p style="margin-left: 10; margin-right: 10; margin-top: 10">

<select name="dropdown" onChange="document.images.test.src=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].value" onChange="document.forms.description.text=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].text" onclick="document.myform.txt=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].value">

<option value="http://www.leviathanpc.net/xasersilver.jpg" text="hello">Thermaltake XaserIII (Silver)</option>

<option value="http://www.leviathanpc.net/xaserblue.jpg" text="hi">Thermaltake XaserIII (Blue)</option>

<option value="http://www.leviathanpc.net/minitaurgreen.jpg" text="hi1">Diabolic Minitaur Green</option>

<option value="http://www.leviathanpc.net/minitaurred.jpg" text="hi2">Diabolic Minitaur Red</option>

<option value="http://www.leviathanpc.net/minitaurblue.jpg" text="hi3">Diabolic Minitaur Blue</option>

</select> </p>

</form>

I believe that the problem is when i refer to the text that i want to change, I'm not sure how to refer to "Hello", "Hi", "Hi1" etc.

Any help would be greatly appreciated.
Thanks!

vwphillips

12-30-2005, 10:16 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script>
var Path='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array()
ImgAry[0]=['One.gif','Some Text 1'];
ImgAry[1]=['Two.gif','Some Text 2'];
ImgAry[2]=['Three.gif','Some Text 3'];

function copyvalue(index){
document.getElementById('img').src=Path+ImgAry[index][0];
document.getElementById('txt').innerHTML=ImgAry[index][1];

}

</script>
</head>

<body>
<select onchange="copyvalue(this.selectedIndex);">
<option >Tom</option>
<option >dick</option>
<option >harry</option>
</select>
<img id="img" width="100" height="100" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
<span id="txt" ></span>
</form>
</body>

</html>

tjc19999

12-31-2005, 01:09 AM

Thanks vwphillips I took bits from you code and put it into mine, i had it formatted how i wanted to so I decided to use my own code and add your refernces you posted, my final code is as follows:

<form name="txt">hello</form>
</td>
</tr>
</table>
<div align="left">
<table width="590" height="78" border=0 bgcolor="#000000" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="100%">
<form name="dropform">

<p style="margin-left: 10; margin-right: 10; margin-top: 10">

<select name="dropdown" onChange="document.images.test.src=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].value, document.getElementById('txt').innerHTML=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].value1">

<option value="http://www.leviathanpc.net/xasersilver.jpg" value1="hello">Thermaltake XaserIII (Silver)</option>

<option value="http://www.leviathanpc.net/xaserblue.jpg" value1="hi">Thermaltake XaserIII (Blue)</option>

<option value="http://www.leviathanpc.net/minitaurgreen.jpg" value1="hi1">Diabolic Minitaur Green</option>

<option value="http://www.leviathanpc.net/minitaurred.jpg" value1="hi2">Diabolic Minitaur Red</option>

<option value="http://www.leviathanpc.net/minitaurblue.jpg" value1="hi3">Diabolic Minitaur Blue</option>

</select> </p>

</form>