What Is DHTML?

It's actually a little tough to get a handle on because it's beginning to mean different things to a few different people. The actual term stands for Dynamic Hypertext Mark-Up Language. That's obvious.
The essence of the term stands for almost any coding that creates movement or interactivity by employing the standards of the 4.0 level Netscape and MSIE browsers.

But there was movement before with animation and interactivity with forms...

Yeah, see... that's the rub. For something to be considered DHTML it has to employ version 4.0 browsers. Again, an argument I've heard is that DHTML is only viable if it occurs within the Explorer 4.0 browser. I've heard DHTML discussed as being PowerPoint for the Web.
On the other hand, some people have stated that DHTML includes Netscape's Layering Commands.

The best description I can offer is that DHTML is any combination of Style Sheets, JavaScript, Layering, Positioning, and Page Division (see the Positioning tutorial for more on this), at the 4.0 browser level, intended to create movement or user interactivity.

Okay, so it's not the "future of the Internet" public-relations-driven description given on the Microsoft DHTML Web page, but it's probably pretty close.

An Example of DHTML
You learn by doing, so let's take a look at DHTML in action. Remember back in primary school when you were given three pegs, round, square, and triangle, and you were told to put them in the correct holes on a peg board? If you did it right, you were off to Harvard. Mess it up, and no warm milk at nap time. This is that same test in DHTML. You'll have to be running MSIE 4.0 at this point.

Go Take the Test
Now that's pretty slick. With a little thinking time, you can see the applications. Make a plan for your office, landscape a plan for your yard, a Virtual Mr. Potato Head for kids, etc., etc.

How Do You Get It To Work?
Okay, let's tear it apart. This is a combination of a simple JavaScript (I was lucky enough to find at the WROX Home Page), some image positioning and page division, and a few Style Sheet commands.
By the way, if you haven't already gone, head to the WROX Home Page. They offer some great examples. Plus they are quite generous in their samples. You can get 15 ready-to-go DHTML items in a Zip packet download.

The Script
It's actually two scripts. The first allows the three images to be moved and the second disallows the main image to be moved. Here it is. You can copy and paste it from here.

<SCRIPT LANGUAGE="JavaScript">
      var curElement;
      function doMouseMove() {
        var newleft=0, newTop = 0
        if ((event.button==1) && (curElement!=null)) {
         
          newleft=
             event.clientX-document.all.OuterDiv.offsetLeft
                    -(curElement.offsetWidth/2)
          if (newleft<0) newleft=0
          curElement.style.pixelLeft= newleft
          newtop=
             event.clientY -document.all.OuterDiv.offsetTop
                    -(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixel
          newtop=
             event.clientY -document.all.OuterDiv.offsetTop
                    -(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixelTop= newtop
          event.returnValue = false
          event.cancelBubble = true
        }
      }

      function doDragStart() {
        // Don't do default drag operation.
        if ("IMG"==event.srcElement.tagName)
          event.returnValue=false;
      }

      function doMouseDown() {
        if ((event.button==1) &&
            (event.srcElement.tagName=="IMG"))
          curElement = event.srcElement
      }

      document.ondragstart = doDragStart;
      document.onmousedown = doMouseDown;
      document.onmousemove = doMouseMove;
      document.onmouseup = new Function("curElement=null")
    </SCRIPT>
    <SCRIPT FOR="playboard" EVENT="onmousedown"
                                  LANGUAGE="JavaScript">
      // Do not move the alienhead or allow it to be dragged
      event.cancelBubble=true
    </SCRIPT>

Take that and paste it in between your <HEAD> commands. The only change you might want to make is the name of the item that will remain in place. I called mine "Playboard." You can see that about four lines up at the start of the second script. If you change the ID name of the item that stays put, you'll need to change it in the script, too.

Get The Images
This little deal only has four images. If you want, you can add as many as you like (there doesn't appear to be an upper limit), but you might run out of floor space. Here are the four images used in this example:

[stage.gif] [circle.gif] [square.gif] [triangle.gif]
     Grab them right from there if you'd like.

The Playing Field
     Here's the code that was used to place the images on the page.

<DIV id=OuterDiv style="position:relative;
                    width:100%;height:400px">
    <img ID="playboard" STYLE="position:absolute;TOP:83pt;
            LEFT:142pt;width: 300px; height=150px;
            Z-INDEX:2;" src="stage.gif">
    <img ID="square" STYLE="position:absolute;TOP:8pt;
            LEFT:0pt;WIDTH:50px;HEIGHT:50px;Z-INDEX:22;"
            src="square.gif">
    <img ID="circle" STYLE="position:absolute;TOP:8pt;
            LEFT:70pt;WIDTH:50px;HEIGHT:50px;Z-INDEX:21;"
            src="circle.gif">
    <img ID="triangle" STYLE="position:absolute;TOP:8pt;
            LEFT:140pt;WIDTH:50xt;HEIGHT:50px;Z-INDEX:21;"
            src="triangle.gif">
</DIV>