Figure 2   Processing Mouse Events


<html>

<head>
<title>Simulating behaviors with IE4</title>
<style>
.Normal {
}

.Hilite {
  color: "red";
}
</style>
</head>

<script> 
function onout() {
   obj = event.srcElement
   if( obj.tagName == "A" )  // uppercase needed!
      obj.className = "Normal";
}

function onover() {
   obj = event.srcElement
   if( obj.tagName == "A" )  // uppercase needed!
      obj.className = "Hilite";
}
</script>

<body onmouseover="onover();" onmouseout="onout();">
<p align="left"><img src="Mind.gif"></p>
<hr>

Look at <a href="mailto:cutting@microsoft.com">Cutting Edge</a>.
<br>
Send your feedback to 
<a href="mailto:dinoe@education.mondadori.com">Dino Esposito</a>

</body>
</html>

Figure 3   Technology Glossary

Technology
 		Description
Dynamic HTML
 		The object model exposed by Internet Explorer 4.x and higher, whose most prominent characteristic is its support for dynamic changes in the page's state or content.
DHTML scriptlets
 		HTML pages with a special portion of script code that makes them appear like script-based visual components. They are rendered as pages embedded inside a host page.
Windows Script
 		XML files that describe a script-based Components component exposing COM functionalities such as Automation and event handling. More importantly, they are the underpinnings of behaviors.
Behavior
 		A piece of script code (or C++ compiled code) that subclasses all the HTML elements that declare a CSS class with the new style behavior. A behavior is given by a .wsc or .htc file.
HTC
 		Introduced with Internet Explorer 5.0 beta 2, they are XML-like files built on the top of Windows Script Components to simplify the development of script-based behaviors.
URN
 		Introduced with Internet Explorer 5.0 beta 2 and HTC, it's the unique name that characterizes any behavior.

Figure 5   HotImage Test Source


<html>
<head>
<title>Testing HotImage Behavior</title>

<style>
.Normal {
  font-Family: Verdana;
  font-Size: 12;
}
.Notes {
  font-Family: Verdana;
  font-Size: 12;
  font-Style: "italic";
}
.Title {
  font-Family: Verdana;
  font-Size: 24;
  font-Weight: 700;
}
.HotImage {
  behavior:url(hotimage.sct);
}

</style>
</head>

<body bgcolor="#C0C0C0">

<span class="Title">Testing the HotImage behavior.</span><br>
<span class="Notes">This code is adapted from the HotImage Scriptlet presented in
 the January 1998 installment of Cutting Edge.</span>
<hr>

<p class="Normal">Give your preference to the finest programming magazine:</font> </p>
<div align="center"><center>

<table border="0">
    <tr>
        <td><img class="hotimage" hot=mind2.gif src=mind1.gif></td>
        <td><img class="hotimage" hot=msj2.gif src=msj1.gif></td>
    </tr>
</table>
</center></div>

</body>
</html>

Figure 6   HotImage Behavior


<?component error="yes"?>

<component id="hotimage">
<public>
   <property name="hot"/>
</public>

<implements id="HotImageBehavior" type="Behavior" default/>

<script language="JScript">
var imgNormal;

attachEvent("onmouseover", event_onmouseover);
attachEvent("onmouseout",  event_onmouseout);

// You can use the object with this CSS style as the root 
// object of scripting. We know this is an <IMG> tag so 
// 'src' is a valid command.
// 'hot' is the name of the property above that automatically
// evaluates to the HOT attribute set in the HTML page.

function event_onmouseover()
{
  imgNormal = src;  
  src = hot;
}

function event_onmouseout()
{
   src = imgNormal;
}

</script>
</component>

Figure 10   New Methods and Properties

Function
 		Description
behavior
 		A new CSS style submitted for approval.
attachEvent, detachEvent
 		Methods of the window object that hook and unhook over the events that reach the element.
addBehavior, removeBehavior
 		Methods of the window object that add and remove a behavior dynamically to a given object.
srcUrn
 		Property of the event object that returns the name of the behavior (URN) that caused the event.
behaviorUrns
 		Collection of the names of all behaviors attached to a given element.
urns
 		Collection of all the HTML elements a given behavior is attached to.

Figure 11   Commonly Used Tags

HTC Blocks
 		Description
ATTACH
 		The HTC counterpart of attachEvent. Lets you bind the behavior code to the specified event so that it gets called when the page raises it.
 
<PUBLIC:ATTACH
    EVENT = sEvent
    FOR = "document" | "element" | "window"
    HANDLER = sEventHandler
    URN = sURN
/>
EVENT
 		The HTC counterpart of the <EVENT> tag. Lets you expose events to the host page.
 
<PUBLIC:EVENT    
    NAME = sName    
    ID = sEventID
/>
GET
 		Defines the procedure that will return the value of the specified property. GET is a block child of PROPERTY.
 
<PUBLIC:GET
    INTERNALNAME = sInternalName
/>
HTC
 		Qualifies the file as an HTC and defines the URN.
 
<PUBLIC:HTC
    URN = sURN
>
METHOD
 		Defines a method and exposes it to the page. The HTC counterpart of the <METHOD> tag.
 
<PUBLIC:METHOD
    NAME = sName
    INTERNALNAME = sInternalName
/>
PROPERTY
 		Defines a property and makes it available to the page. The property value can be read and written through GET and PUT blocks.
 
<PUBLIC:PROPERTY
    NAME = sName
    ID = sPropertyID
    INTERNALNAME = sInternalName
    GET = sGetFunction
    PUT = sPutFunction
    PERSIST = bPersist
>
PUT
 		Defines the procedure that will store the value of the specified property. PUT is a block child of PROPERTY.
 
<PUBLIC:PUT    
    INTERNALNAME = sInternalName
/>
Note: Color means required information

Figure 12   HotImage as an HTC


<PUBLIC:HTC URN="HotImageHTC">    

<PUBLIC:EVENT NAME="onImageClick" />

<PUBLIC:ATTACH EVENT="onmouseover" HANDLER="event_onmouseover" />
<PUBLIC:ATTACH EVENT="onmouseout" HANDLER="event_onmouseout" />
<PUBLIC:ATTACH EVENT="onclick" HANDLER="event_onclick" />

<PUBLIC:PROPERTY NAME="hot">
  <PUBLIC:GET INTERNALNAME="get_Hot" />
  <PUBLIC:GET INTERNALNAME="put_Hot" />
</PUBLIC:PROPERTY>

<PUBLIC:METHOD NAME="Enable" />


<SCRIPT LANGUAGE="JScript">    

<!--
    All the source code for the various functions,
    events, and property handlers goes here.
--!>

</SCRIPT>

</PUBLIC:HTC>