As of IE version 5.5, Microsoft gave developers the ability to code customised behaviours. In Microsoft’s own lingo, these custom behaviours are called element behaviours. You can read MSDN’s official documentation for element behaviours in this MSDN article.
Here's an interesting fact: Element behaviours can override the browser’s built-in behaviours. For example, you can rewrite the link (or anchor “<a href>” element) to do some other action instead of jumping to a specific URL. To illustrate this concept, below is a custom behaviour that creates a funky fade effect when you mouse over a link. Please note that the effect will work only in IE 5.5 and above.
<html>
<head>
<title>Element behavior Example - Link Fade</title>
</head>
<link rel="stylesheet" type="text/css" href="element.css">
<body>
<a href="http://builder.com.com/">Click to go to Builder.com</a>
</body>
</html>
As you can see, it’s quite simple. The page contains a link to Builder.com and a link to a style sheet called element.css. Listing B shows the source of the element style sheet (element.css):
Listing B
The above code tells the browser that there should be black text within all links, and links should not be underlined. We have linked a custom HTML component (i.e., element.htc) and the IE fade transition to the anchor element. Once the user hovers the pointer over the link, the style sheet defines the text color as white (which is the same color as your white background). For more information on visual filters and transitions, check out this MSDN article.
Listing C contains the source code for the custom component (element.htc).
Listing C
Here’s how it works. First, you declare the .htc file as a publicly accessible component. Then you attach two events to the component, onMouseOver and onMouseOut, and define two functions, mOver(), and mOut(). Both functions do essentially the same thing: They apply the fade transition defined in the style sheet to any link on the HTML page. So when you run your mouse over a link, the text fades from black (as defined in the a{} block in the style sheet) to white (as defined in the a:hover{} block), and vice versa.
HTML Components and .NET
Microsoft has integrated into Internet Explorer 5.0 the WebService behaviour that allows client-side code to access methods contained in remote .NET Web services or other SOAP-enabled services. Abstraction makes the behaviour simple to use because the developer doesn't require any specific knowledge or expertise about the service. The WebService behaviour can extract everything from SOAP arrays and data to XML formatted data. Most importantly, the behaviour supports the next-generation .NET Web services infrastructure and tools. For more information on the WebService behaviour, check out this MSDN article.
Just the tip of the iceberg
This article barely begins to address the potential of DHTML behaviours. There's a host of very useful integrated behaviours (the ClientCaps behaviour comes to mind) that I haven't addressed, and the customisation possibilities are endless. While DHTML behaviours are currently limited to IE, IE dominates the browser market. With this in mind, DHTML behaviours should be incorporated into any serious Web developer’s skill set.
1
Elbroder - 05/04/07
Nice Post, very useful.
» Report offensive content
2
Isaias at www.ve.info.ve - 05/04/07
Wow, thanks really.
» Report offensive content
3
web design - 16/05/08
I have gone through the information provided by you on Modularise Web design with DHTML behaviours. It has been quite valuable. If you want to know more on<a herf= “http://broadwayinfotech.com/”> web design <a/>, website development service, application development, you can visit us at I hope our services will be useful in your pursuit Ecommerce Solutions.
» Report offensive content
4
Website Design Company Delh - 22/02/10
Addictive Media is a premium provider of website design and web development services for businesses. Our primary aim is to create a compelling, targeted yet simple user experience that not only promotes a business but also spreads a positive outlook about it..
We launch websites that launch businesses. And this is the real goal of all the services that are provided by us. As a creative agency we understand the importance of the four Ds - Discovering, Designing, Developing and Delivering. We closely monitor all the stages that go into developing a successful website. For us the relation with our clients does not end with the delivery of the final product, it continues as long as the clients use our designed product
» Report offensive content