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

<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title>JavaScript DOM Examples</title>

  <style>

  #example1 {

font-size:12px;

font-family:"Courier New", Courier, monospace;

  }

  </style>

  <script language="javascript" type="text/javascript">

    function resizeText(multiplier) {

        if (document.body.style.fontSize == "") {

            document.body.style.fontSize = "1.0em";

        }

        document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";

    }

    function resetText() {

        document.body.style.fontSize = "1.0em";

        document.getElementById('example1').style.fontSize ='12px';

    }

    function showSelected(form) {

        var selObj = document.getElementById('category'); 

        var selIndex = selObj.selectedIndex;

        form.searchll.value = selObj.options[selIndex].text;

    }

    function $(element) {

        return document.getElementById(element);

    }

  </script>

</head>

<body>

<h2 class="content_heading">JavaScript DOM Examples</h2></center>

<br />

<form method="get" id="llsearch" action="#">

<table class='linklisttable' border='0'><tr><td valign="top"><table><tr><td>Type: </td><td><select name="category" id="category" onchange="showSelected(this.form);">

<option value="0" selected="selected">All</option>

<option value="1">PDF Documents</option>

<option value="2">Books</option>

<option value="3">Videos</option>

<option value="4">Websites</option>

<option value="5">Presentations</option>

<option value="6">Other</option>

</select></td><td>

<div>

<input type="text" name="searchll" id="searchll" value="Search..." />

<input type='hidden' value='89' name='page_id' id='page_id' />

<input type='submit' value='Search' />

</div>

</td></tr></table></td></tr></table>

</form>

<!--search code starts here-->

<div id="examples" name="examples">

    <div id="example1">

       <input type="button" onclick="document.getElementById('example1').style.fontSize='16px';" value="*1*" />

       <input type="button" onclick="resizeText(2.0);" value="*2*" />

       <input type="button" onclick="resetText();" value="*3*" /><br/>

       <script language="javascript" type="text/javascript">

           document.write('Browser: ' + navigator.appName + '<br />');

           document.write('Version: ' + navigator.appVersion + '<br />');

           document.write('Location: ' + document.location);

       </script>

    </div>

    <div id="example2">

       <input type="button" onclick="document.getElementById('choice').innerHTML='no choice';" value="*1*" />

       <input type="button" onclick="var selIndex = document.getElementById('category').selectedIndex;document.getElementById('choice').innerHTML=document.getElementById('category').options[selIndex].text;" value="*2*" />

       <p id="choice"></p>

    </div>

    <div id="example3" name="example3">

        <input type="button" onclick="document.die.src='2.jpg';" value="*1*" />

        <input type="button" onclick="document.die.src=Math.floor(1+Math.random()*6) + '.jpg';" value="*2*" />

        <input type="button" onclick="$('die').src='6.jpg';" value="*3*" />

        <input type="button" onclick="$('die').width='48';" value="*4*" />

        <img id="die" src="1.jpg">

    </div>

</div>

</body>

</html>