Overview of the definition of HTC components after IE5.0

(1) First, add several event responses to this "behavior". The statement writing format is as follows:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
[\s\S ]*\n
"EVENT" corresponds to the required event name, here they are nmouseover, onmouseout, onmousedown, onmouseup. You can of course add other event names to meet your specific needs. "ONEVENT" corresponds to an individual event handler, that is, the name of the function called when the event is triggered. The glowit() function creates a red glow around fonts. The noglow() function eliminates the glow effect of the font. The Font2yellow() function changes the font color to yellow. The Font2blue() function changes the font color to blue. The definitions of all four events are similar.
(2) Next, add two more “method” definitions to this “behavior” as follows.
<PUBLIC:METHOD NAME="move_down"/>
<PUBLIC:METHOD NAME="move_right"/>
The "NAME" parameter corresponds to the given "method" name. move_down and move_right are the function names corresponding to the "methods" for moving down and right respectively. Note that there should not be "()" brackets after the method name, that is, do not write it like "move_down()", which is not allowed in the syntax of "method" definition.
(3) The next step is to use javascript script statements to write the function content corresponding to the "event handler" and "method" in the DHTML environment we are familiar with to achieve the desired effect. For specific content, please refer to the source code below. The "element" parameter refers to the object to which this "behavior" is attached, because "behavior" is always attached to an element on the page and works through this element. The other statements are all DHTML programming content, so I won’t go into details. If you have any questions, you can refer to the content about IE browser in Microsoft's MSDN development documentation, which contains detailed DHTML programming reference content, property and method usage instructions, etc., and contains a large number of articles and example programs. It is a good learning habit, especially for beginners, to frequently visit Microsoft's MSDN documentation. You can get almost any answer you want. Its URL is: http://msdn.microsoft.com/ie/.
The content of the complete "behavior" document "font_effect.htc" is as follows:
////////////////////////Begin of "Behavior" document//////////////////////////////
//Add four mouse events to "Behavior"
[code]
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
//Define two methods for "behavior"
<PUBLIC:METHOD NAME="move_down"/>
<PUBLIC:METHOD NAME="move_right"/>
<SCRIPT LANGUAGE="JScript">
//Define a variable to save the font color
var font_color;
//Define the method to move text down
function move_down()
{
element.style.posTop+=2;
}
//Define a method to move text to the right
function move_right()
{
element.style.posLeft +=6;
}
//Define the calling function of the mouse onmouseup event
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//Define the calling function of the mouse onmousedown event
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}
//Define the calling function of the mouse onmouseover event
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color=red,strength=2)";
}
}
//Define the calling function of the mouse onmouseout event
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
</SCRIPT>

<STYLE>
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</STYLE>

<button onclick="myspan.move_right();">Move the first line of text to the right</button>

<button onclick="myspan.move_down();">Move the first line of text down</button>

<html>
<HEAD>
<TITLE >Behavior Effect Demonstration< /TITLE >
<STYLE>
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</STYLE>
</HEAD>
<BODY>
<span id="myspan" class='myfilter'>Text effects produced by the behavior</span>

<span class='myfilter'>Glow when the mouse is pointing</span>

<span class='myfilter'>At the same time, the text turns white</span>

<span class='myfilter'>The text turns yellow when the mouse is pressed</span>

<span class='myfilter'>The text turns blue after you lift the mouse</span>

<span class='myfilter'>The text returns to its original state after the mouse leaves</span>

<button onclick="myspan.move_right();">Move the first line of text to the right</button>

<button onclick="myspan.move_down();">Move the first line of text down</button>
</BODY>
</html>

<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS\:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCjs:RIGHT>
Read Doc javascript's columns, tips, tools, and tutorials
</DOCjs:RIGHT>
</BODY>
</HTML>

<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE> //Define a style sheet for the component
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //Define methods for components
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //Define response events for components
</BODY>
</HTML>

function fnInit() {
document.body.innerHTML = element.value; //Set component display content
document.body.className = "clsMyTag"; //Set the display style sheet,
defaults.viewLink = document; // Make this component visible to other documents
element.aProperty = element.value; //Set the property value of the component
}

<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>