Dynamic HTML is what makes a Web page or a channel come alive. It enables faster, more interactive Web pages so you can deliver more fun and excitement to your users.

Client Side Advantages
What Dynamic HTML Gives You
Sample City
Objects

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


Because Dynamic HTML works in the viewer’s browser (that is, on the client side of the connection), response is immediate. There is no delay for a round trip to the server at all. By using Dynamic HTML to move as much action as possible to the client side, you can provide a much higher degree of interactivity. Pre-caching, which downloads content in the background, enhances this effect because the viewer moves from page to page with minimal delay.

Another big plus: Dynamic HTML opens up a whole new world of client-side Internet development. You are no longer limited to animations or other cute tricks. You can write a full-blown application using script and Dynamic HTML. What does "full-blown" mean? Just about anything, such as a complete shopping application. The key to complex application development has three parts: channel technology, Dynamic HTML, and data binding. By combining all three parts, you can create powerful Internet applications that will quickly have you re-thinking the very concept of "Web page."

Dynamic HTML includes four areas that are chock full of neato-keen features; details coming on the next few pages.

You saw some examples of cool pages powered by Dynamic HTML in the introductory section of the tutorial. You can link to those pages now to get a look at what's possible with Dynamic HTML. You can link back to those pages and check them out. To view the source for these pages, click the links below to load the pages, and use the View | Source menu item. Some of the best examples are:

Use the RETURN button, located near the top of the screen, to return to this page after you play around with a sample page!

Everything on the page is an object, such as a range of text, an image, a link, etc. Many objects are grouped into collections, such as all of the tags on a page, or all of the images. You can use Dynamic HTML to control one object, a subset of the objects in a collection, or every object in a collection -- whatever suits your purposes. You can also write a script that determines what object the user clicked on, and then takes appropriate action. Objects are arranged in an object hierarchy, and events bubble up through the hierarchy and can be handled at any level -- or cancelled at any level, if appropriate.

The following code will access the headings collection on the page any time there is a mouse click anywhere on the page.

Sub document_onclick()
  // Set a variable equal to the list of all level one heading tags on the page.
  Var Level1Headings = document.all.tags(“H1”)
  // Reference a member of the collection:
  Var FirstHeading = Level1Headings(0)
End Sub

The following script fragment first checks to see if the tagname of the object the user clicked on is "IMG". If yes, it uses a SELECT statement to determine which version of the image is currently visible. It then uses the outerHTML property to replace the HTML of the object. By the way, a very interesting thing about this script is that it is invoked any time there is a mouse click anywhere in the document. This means you can write one script to manages all clicks, which leads to much easier code maintenance down the road. For example, you could also include onClick code for other images, or even other tags. Click on the SAMPLE button to see the code below in action.

sub document_onClick                     
  If window.event.srcElement.tagName = "IMG" then
    Select case window.event.srcElement.ID
      Case "Picture01"
        ' Replace the image with an inverse of itself.
        window.event.srcElement.outerHTML = "<IMG ID=Picture01i SRC=img_inv.gif>"
      Case "Picture01i"
        ' Restore the original image.
        window.event.srcElement.outerHTML = "<IMG ID=Picture01 SRC=img.gif>"
    End select
  end if
end sub

<BODY>
<P><IMG ID="Picture01" SRC="images/pageseal.gif" WIDTH=91 HEIGHT=91></P>
</BODY>
' The key is to put the text within <SPAN> tags, and give it 
' an ID. You can then manipulate the SPAN's style as shown here.
' Even the cursor style can be changed!
<SPAN ID="myText" STYLE="cursor:hand">a bit of normal text</SPAN>
<SCRIPT LANGUAGE="VBSCRIPT">
sub myText_onMouseOver
  myText.style.visibility = "hidden"
end sub
sub myText_onMouseOut
  myText.style.visibility = "visible"
end sub
</SCRIPT>

Here's the source code as well as the animated object:

sub moveSeal()
  if pageSeal.style.posLeft > 600 or pageSeal.style.posLeft < leftMargin then
    ' reverse direction
    offsetAmount = -offsetAmount
  end if
  pageSeal.style.left = pageSeal.style.posLeft + offsetAmount
  imgTimer=window.setTimeout("moveSeal()", 100, VBScript)
end sub
<SPAN ID="MO">Move your mouse over this text to try it.</SPAN>
<SCRIPT LANGUAGE="VBSCRIPT">
sub MO_onMouseOver
  MO.style.color="red"
  MO.innerText = "Hey! You changed the text! Neat, isn't it?"
end sub
sub MO_onMouseOut
  MO.style.color="#0000ff"
  MO.innerText = "Move your mouse over this text to try it."
end sub
</SCRIPT>
<OBJECT  id="quotelist" CLASSID = "clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"></OBJECT>
function company_onclick()
  quotelist.SortColumn = "Company"
  quotelist.Reset()
end function
<table border="0" id="elemtbl" datasrc="#quotelist" cellpadding=4>
<tr><td><SPAN DATAFLD="Company"></SPAN></td>
<td><SPAN DATAFLD="Symbol"></SPAN></td></tr></TABLE>
        

This text block (identified with its cornsilk background) illustrates how objects are arranged in a hierarchy. Click on anything in this text block to see how the click event gets passed from the clicked object to its parent, to that object's parent, etc. For example, this is the first paragraph (ID=xP1A) in the DIV (ID=xfirstDIV). Click on the italic text "first paragraph" to see which objects receive the click event.

This is the second paragraph in the same DIV. Note: All elements need not have an ID. Only elements that you want to refer to need an ID.

Paragraph one (ID=xP1B) in another DIV (ID=xsecondDIV). Here is a simple link in this paragraph. Click on the link to start an event bubbling up the hierarchy. The hierarchy for the click event is shown by a series of messages, one for each object as the click event moves up the object hierarchy. If you click on a different element, the hierarchy can be very different.

Paragraph two two in secondDIV.

If you click on this bold text, you'll see a different hierarchy. Try clicking on the various objects on this page to see the hierarchy for the event that starts at that object. Note: The handler for the document object is simulated, because the document's on_click handler has a lot of other work to do to display various paragraphs outside of this particular text block.