DHTML Tutorials

Dynamic HTML is an exciting prospect for Web Developers. Finally we can write HTML that looks "designed" and yet it interacts with the readers the way a good software package does. However, DHTML is still in its infancy, and as such is not supported equally across all browsers. Even the two browser giants, Internet Explorer and Netscape Navigator, in their most recent incarnations do not support all the same things.

Use of Cross_ Browser

design for a common denominator
create branching pages
develop branching content within pages
write your own code libraries

Creating a cross-browser example of The Swimming Fish

In this example we shows a fish, three poles and a button. When the button is clicked, the fish swims across the poles forever.

Source code of Example

<HTML>
<HEAD>
<TITLE>Swimming Fish</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<LAYER NAME="bluepole" LEFT=160 TOP=150>
<IMG SRC=pinkpole.gif>
</LAYER>
<LAYER NAME="greenpole" LEFT=360 TOP=150>
<IMG SRC=redpole.gif>
</LAYER>
<LAYER NAME="redpole" LEFT=260 TOP=150>
<IMG SRC=blackpole.gif>
</LAYER>
<LAYER NAME="fish" LEFT=40 TOP=170 ABOVE="redpole">
<IMG SRC=fish1.gif >
</LAYER>
<SCRIPT>
<!-- Simple move function() -->
function movefish() {
   var fish = document.layers["fish"];
   if (fish.left < 400) {
      fish.offset(5, 0);
   }
   else { 
      fish.left = 10;
   }
   setTimeout("movefish()", 10);
   return;
}
</SCRIPT>
<H1>Swimming Fish Example </H1>
<FORM>
<INPUT type=button value="Move the fish" 
OnClick="movefish(); return false;">
</FORM>
<P>
(This demonstration requires Netscape Navigator 4.0 
or later.)
</BODY>
</HTML>