1 - What do DHTML Behaviors do?

DHTML Behaviors are disk files, similar to external script files. They let you add custom methods, properties and events to ordinary HTML tags (such as <IMG> or <INPUT>).

They also let you automatically trap specified events for a tag, so you can arrange for an <IMG> to do something in response to a mouse click, without having to add an onclick= event handler to the tag itself.

Behaviors are reuseable, so once you've written a  behavior to upgrade one tag, you can apply it to as many other tags as you like.

Behaviors are linked to individual tags via style sheets (for details, see later pages in this guide).

Say we've written a Behavior that adds disappear() and reappear() methods to a tag,  plus a tagsname property which stores a descriptive name for a tag. We've linked the behavior to style class .hideable (see later pages). Now you can write code like this:

<IMG ID="MyPic" CLASS="hideable" SRC="wwie5lgo.gif"
      onmousedown="this.disappear()"
     onmouseout="this.reappear()"
    tagsname="That nice IE5 logo" >
<DIV ID="MyDiv" class="hideable">
......
</DIV>
<INPUT TYPE="button" value="Hide that DIV!"
     onclick="MyDiv.disappear()">
<INPUT TYPE="button" value="Show that DIV!"
     onclick="MyDiv.reappear()">
<INPUT TYPE="button" value="Show image name!"
     onclick="alert(MyPic.tagsname)">

By associating the <IMG> and DIV tags with the behavior (via the class .hideable), we've given them the behavior's extra methods and property. These can now be used anywhere in the page exactly as if they were standard Dynamic HTML methods and properties.

Note also that we can give the tagsname property  an initial value using a name=value pair on a tag (tagsname="That nice IE5logo"), just like a 'real' tag attribute.

Try this code in the page on the right.

IN THE NEXT PAGE - how to construct a DHTML behavior file.