DHTML Example

If you want to make animation than you should use moving element around the document. This feature is provided by DHTML. In Netscape, this is done by manipulating the left and top attributes of the <layer> tag.

Example of moving layer on any math eg

<layer name="space" left=128>
<img src="TN00018A.gif">
</layer>
<script>
function moving(){
if (document.space.left<1000)
document.space.left+=5
moveid=setTimeout("moving()",50)
}
function come_back(){
clearTimeout(moveid)
document.space.left=128
}
</script>
<form>
<input type="button" value="Move" onClick="moving()">
<input type="button" value="Come back" onClick="come_back()">
</form>

Example to rol over mouse movement

An author creates a rollover effect to make part of a page react when the user moves the mouse pointer over it. With Internet Explorer 4.0, the process of creating a rollover effect is greatly simplified.

<HTML>
<HEAD>
<STYLE>
.Item {
   cursor: hand;
   font-family: verdana; 
   font-size: 20;
   font-style: normal;
   background-color: blue;
   color: white
 }
.Highlight {
   cursor: hand; 
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: white;
   color: blue
 }
</STYLE>
</HEAD>
<BODY>
<SPAN class=Item>Milk</SPAN>
<SPAN class=Item>Cookies</SPAN>
<SPAN class=Item>Eggs</SPAN>
<SPAN class=Item>Ham</SPAN>
<SPAN class=Item>Cheese</SPAN>
<SPAN class=Item>Pasta</SPAN>
<SPAN class=Item>Chicken</SPAN>
<SCRIPT>
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}
document.onmouseover = rollon;
function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}
document.onmouseout = rolloff;
</SCRIPT>
</BODY>
</HTML>