Walter Zorn has developed a JavaScript vector graphics library that permits you to "draw" lines, ovals, etc. on to your web page.

Download the wz_jsgraphics.js

Mechanically, the vector graphics library fires AFTER the web page has been painted on the browser screen. This means that you need to place the vector graphics <script> AT THE BOTTOM of the HTML code for the web page. The vector graphics library requires the use of absolute positioning.

Example code:

<script type="text/javascript" src="wz_jsgraphics.js"></script>
...
<input type="button" value="Draw a circle" onclick="drawACircle()">
<input type="button" value="Clear" onclick="clearACircle()">
...
<div id="button"></div>
...
var jg_doc = new jsGraphics("button");

function drawACircle()
{
	jg_doc.setColor("#00ff00"); // green
	jg_doc.fillEllipse(10, 10, 10, 10); 
	jg_doc.paint(); 
}

function clearACircle()
{
	jg_doc.clear();
}	
		

---

<div id="pic" style="position:relative">
<img src="faculty.jpg">
</div>

var jg_doc_Jake = new jsGraphics("pic");

function circleJake()
{
	jg_doc_Jake.setColor("#00ff00"); // green
	jg_doc_Jake.drawEllipse(440, 10, 150, 150);
	jg_doc_Jake.paint(); 
}

function clearACircle()
{
	jg_doc_Jake.clear();
}

---

Use a Select

Volvo Saab Mercedes Audi

<script type="text/javascript">

	function doSelectChange()
	{
		var i = document.getElementById("mySelect");		
		var itemSelect = i.selectedIndex;		
		alert("Index is " + i.selectedIndex + " value is " + i.options[itemSelect].text);
				
	}


</script>

<select id="mySelect" onchange="doSelectChange()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Use MouseOver

    <script type="text/javascript">
   
   	function doPerson(inStr)
	{
	 alert("You just moused " + inStr);			
	}
   
   
   </script>
    
  <br>
  <br>
  <h3>Use MouseOver</h3>  
  <br>
  <div style="width: 100px; float:left">
  <p onmouseover="doPerson('Larry')" style="padding: 5px; border: solid medium black">Larry</p>
  <p onmouseover="doPerson('Moe')" style="padding: 5px; border: solid medium red">Moe</p>
  <p onmouseover="doPerson('Curley')" style="padding: 5px; border: solid medium green">Curley</p>
  </div>
  <div style="width: 50px; float:left">
   <img src="thumbnNailFaculty.jpg">
</div>     
  <br clear="all">