DHTML Tools 441DHTMLDHTML ToolsWeb Design in a Nutshell, eMatter Editionto:
if (document.all.animate.style.pixelTop > 300)You could also have the animation start as the result of a button click rather than
immediately after the page loads. This can be done by changing theonloadevent
to a function referenced by a web link. To do this, change
<BODY onload="counter = setInterval('motion()', 20)">
<DIV ID="animate">Moving text</DIV>
</BODY>to:
<BODY>
<DIV ID="animate">Moving text</DIV>
<br>
<br>
<br>
<a href=javascript:start()>Click here to start animation</a>
</BODY>Then add a function to the script section of your page calledstart:
function start()
{
counter = setInterval('motion()', 20);
}These examples should give you an idea of how Dynamic HTML currently works
with both Netscape 4.0 and Internet Explorer 4.0, and how it can be incorporated
into your web pages. If DHTML seems complicated to you, remember it is simply
a combination of HTML, Cascading Style Sheets and JavaScript working together
through the Document Object Model. As you learn more about each of these tools,
you will gain more competence in DHTML.
If you feel the need to add functionality beyond what these examples offer, or
have mastered them and want to learn more, be sure to read the “Where to Learn
More” section at the end of this chapter.
DHTML Tools
Many web designers rely on WYSIWYG tools and editors that make it possible to
see the effects of creating and editing immediately. There are many DHTML
WYSIWYG editors available today. They may or may not suit your needs.
The previous relatively simple examples demonstrate that hand coding DHTML
can be complicated and arduous. Differences between Netscape 4.0 and Internet
Explorer force web designers to write two sets of code for each function. This
doubles production time and creates code that is difficult to read and maintain.
There are many tools that create DHTML for you behind the scenes. Some of these
tools are narrow in focus and provide specific functionality while others such as
Dreamweaver and Fusion are full packages with which you can create and main-
tain whole websites as well as write DHTML code.