DHTML ON ITS BEST BEHAVIOR!
Q:
(IE5 users) How do those animated pushbuttons work?
Q: (IE4 users) Why aren't those pushbuttons
animated on my system?
A: (Both browsers) DHTML Behaviors!
 When
you run DNJ Dilemma in Internet Explorer 5.0 or later, you'll find
that all the graphical buttons 'indent' when you click on them. In IE 4.0, the buttons don't indent. This
is because I used
a new IE5 feature, DHTML Behaviors, which let me turn static images into
animated ones just by adding a class= attribute to their <img>
tags. IE4 (and other browsers) will ignore the Behavior code, and
render the buttons static.
Behavior files.
A DHTML Behavior is an external file, with an .htc name
extension. It contains a mixture of XML tags and script code, which define
custom properties, methods, events and event traps. When you associate an
HTML element (such as an <img> tag) with
a Behavior file, the element acquires the properties, methods, events and event
traps defined by the file.
A Behavior (.htc) file is linked to an HTML
document by a new CSS attribute, behavior:. When
an HTML element's CSS style rule or inline style sheet contains a behavior: attribute,
the element acquires the characteristics defined by the relevant .htc
file. Any number of elements can be associated with a given Behavior (and
you can link multiple Behavior files to a page), so
it's a very easy and efficient way of adding functionality.
Here are the contents of the Behavior file anibtn.htc, which
is used in this page and DNJ Dilemma:
<PUBLIC:PROPERTY NAME="indented" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="indent()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="unindent()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="unindent()" />
<PUBLIC:METHOD NAME="indent" />
<PUBLIC:METHOD NAME="unindent" />
<script>
indented = false
function indent () {
if (! indented) {
style.pixelTop += 3
style.pixelLeft += 3
indented = true }
}
function unindent () {
if (indented == true) {
style.pixelTop -= 3
style.pixelLeft -= 3
indented = false }
}
</script>
The
<PUBLIC:PROPERTY.. tag defines a custom property which will be
automatically added to every HTML element associated with this behavior.
The
three
<PUBLIC:ATTACH EVENT.. tags automatically trap events on associated
elements, specifying the name of the script function (within this file) to
be executed as the event handler.
Finally, the two <PUBLIC:METHOD.. tags
add custom methods to associated elements. Like event-trappers, a method
definition tag includes the name of the script function (within the behavior
file) which will service calls to the method - although this time you omit
the () brackets! For example, an element called "myImg" that was
associated with this behavior would support this method call:
myImg.indent()
(NOTE - Method definitions aren't actually necessary in the DNJ Dilemma
application, because the indenting functions are called automatically in
response to trapped mouse events.)
The behavior file's <script></script> block begins with an inline code
statement, which is executed at page-load time for every element associated with
this behavior - this example initialises the current element's indented
property to false.
Finally come JScript functions, which service both the
custom method and event-trapping definitions. Note that they include
references such as style.pixelTop, rather
than
this.style.pixelTop or
objectRef.style.pixelTop - these are references to properties of the
element to which the behavior is currently being applied, and don't need an
object identifier.
Linking a behavior file to a document
Here's the CSS rule which links anibtn.htc to this document:
<style>
.animbtn
{behavior:url(anibtn.htc); position:relative; top:0; left:0; }
</style>
Note that, as well as a behavior: attribute, the rule
contains other CSS attributes which make elements relatively positioned, and
thus moveable.
TIP - I've encountered
problems when the style class name and behavior file name are the same.
That's why the class is 'animbtn' and the file is 'anibtn.htc'.
Associating an HTML element with a style class
Here's the
<img> tag
for the 'Click Me!' button:
<img id="btn" src="clickme.gif" class="animbtn">
Adding a
class="animbtn" attribute to the tag turns it instantly
into an animated button, with automatic trapping of its onmousedown,
onmouseup and onmouseout events - in IE5, at least! You can associate as
many elements as you like with the animbtn class.
DHTML Behaviors don't do anything that couldn't be achieved
via in-tag event-handling attributes and in-document script functions.
However they're far easier to maintain, and once you've used
them, you won't want to go back to the old techniques!
|
