Hi Im trying to place images in this change content script but it refuses to co-operate. Is there some way to do it?

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
            <option selected value="What is JavaScript?">What is JavaScript?</option>
            <option value="Why learn JavaScript?">Why learn JavaScript?</option>
            <option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option>
            <option value="What is DHTML?">What is DHTML?</option>
          </select><br>
          </td>
        </tr>
        <tr>
          <td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
        </tr>
      </table>
    </form>
    </td>
  </tr>
</table>

<p>

<script language="JavaScript">

/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()

thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects, <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>'

thecontents[1]='The first few words that come to mind are: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, is unacceptable. With JavaScript, you can change that. Imagine being able to break free and allow your creativity to dictate what you put on your webpage, instead of the other way round.'

thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Also, you need to compile a Java program before you can run it, whereas with JavaScript, no compilation is needed-simply open up a text editor, type it, save it, and your browser is ready to run it!'

thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable once the page has loaded, such as text, page styles (font color, size etc), element position, etc, can now all be changed dynamically, thanks to DHTML. It brings your web pages one step closer to how things look inside your television, where images appear and disappear, text flies in and out, and content move around freely inside the screen.'


//don't edit pass this line

function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}

document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>

you could do it if you changed the output from a textbox to a DIV and used the inner HTML property:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
            <option selected value="What is JavaScript?">What is JavaScript?</option>
            <option value="Why learn JavaScript?">Why learn JavaScript?</option>
            <option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option>
            <option value="What is DHTML?">What is DHTML?</option>
          </select><br>
          </td>
        </tr>
        <tr>
          <td width="100%"><div id="output"></div><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
        </tr>
      </table>
    </form>
    </td>
  </tr>
</table>

<p>

<script language="JavaScript">

/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()

thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects, <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>'

thecontents[1]='The first few words that come to mind are: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, is unacceptable. With JavaScript, you can change that. Imagine being able to break free and allow your creativity to dictate what you put on your webpage, instead of the other way round.'

thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Also, you need to compile a Java program before you can run it, whereas with JavaScript, no compilation is needed-simply open up a text editor, type it, save it, and your browser is ready to run it!'

thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable once the page has loaded, such as text, page styles (font color, size etc), element position, etc, can now all be changed dynamically, thanks to DHTML. It brings your web pages one step closer to how things look inside your television, where images appear and disappear, text flies in and out, and content move around freely inside the screen.'


//don't edit pass this line

function changecontent(which){
document.getElementById('output').innerHTML=thecontents[which.selectedIndex]
}

document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>

Excellent! thankyou very much! you learn something new everyday.
Is it possible to retain the output div as a contained space? ie have scroll bar (verticle with width & height attributes giventhe output div?

EDIT~ nevermind, I got it! :D Thankyou again Mate! :D

This article has been dead for over six months. Start a new discussion instead.