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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop-down box changes text javascript?

    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
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    I think to do this in javascript you'd need to look into incorporating the text into an iframe and then changing the iframe source in the same way that you are changing the image source.

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i don't want to neccesarily do this in javascript, if there is a way to do it in html i would rather do it that way, which ever is easier.

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