Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •