Dynamic HTML--tutorial.jcwcn.com

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>

It looks a bit daunting right now, but stay with me here. I'll get you through it.

Line One -- The Page Division

Here's line one:

You didn't know this at first, but the game you played had boundaries. You were playing on a set "section" or division of the page. That's what the command <DIV> stands for. You are blocking off a section of the page. Please also notice the </DIV> command at the end of the block of text above.

Okay, you've set aside a section of the page, but how much of a section? Now we get into positioning using Style Sheet commands. I also touch on this a bit in the Layer tutorials.

Here's What's Happening

DIV states this is a division of the page.
id=OuterDiv states this is the outer parameter of the game.
style= denotes that what follows are Style Sheet commands.
position:relative; denotes that this division's position is relative to the other items it will contain.
width:100%;height:400px" states that the width of this division is 100% of the width of the screen and 400 pixels high.

The Images

The images are all placed on the page in basically the same fashion, so I'll only go over one. Here's the command to place the large stationary image on the page:

Here's What's Happening

IMG means it's an image.
ID="playboard" is a name I gave the image. Remember that since this one is stationary, it is affected by the second script above, so the IDs must match up.
STYLE= indicates the style commands coming up.
position:absolute; means that the image will be positioned exactly where I say to put it.
TOP:83pt;LEFT:142pt is the exact location of the upper left-hand corner of the image -- 83 pixels from the top of the browser screen and 142 pixels from the left of the browser screen.
width: 300px; height=150px; are the width and height of the image that will display.
Z-INDEX:2; is another positioning element. Notice its number is lowest of the four? Thus it will be the lowest level of this. In other words, items will go on top of it.
SRC="stage.gif" is the name of the image.

Each of the images above are done the same way. The only differences between the commands are the ID names and names of the images, of course, and the positioning pixel numbers. Remember that you must make allowances for these positions. When you state that positioning is absolute, if there is text or another image in the way -- tough! The position is absolute and other items will be covered up.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Dynamic HTML