Figure 2 Color Picker

Article
06/25/2008

  <html>
<style>
    .colorpick    {behavior: url(ColorPick.htc)}
</style>

<script>
function fnColorChange()
{
    theText.style.color = picker.value;
    theColor.value = picker.value;
}
</script>


<body>

<h3>Color Picker</h3>Use the color picker to set color values visually.
<hr>
<span ID=theText>This is the currently selected color.</span>
<input ID=theColor type="text">

<br>
<input ID=picker type="text" class="colorpick" 
    value="#fFFf00" onchange="fnColorChange()">
<br>
<br>


</body>
</html>

Figure 4 Same Element, Different Behavior

  <HTML>
<HEAD>
<TITLE>addBehavior Method Sample</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="ul.css">

<SCRIPT>
var collBehaviorID = new Array();
var collLI = new Array ();
var countLI = 0;

function attachBehavior()
{
   collLI = document.all.tags ("LI");
   countLI = collLI.length;
    for (i=0; i < countLI; i++)
    {
       var iID = collLI[i].addBehavior ("hilite.htc");
       
       if (iID)       
          collBehaviorID[i] = iID
      } 
}

function detachBehavior()
{ 
     for (i=0; i < countLI; i++)
        collLI[i].removeBehavior (collBehaviorID [i]);
}
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FONT SIZE=1 FACE="Verdana,Arial,Helvetica">
<OL>
    <LI>Click <A HREF="javascript:attachBehavior()">here</A> to add a highlighting effect
    as you hover over each item below.</LI>
    <LI>Click <A HREF="javascript:detachBehavior()">here</A> to remove highlighting.</LI>
</OL>
<UL>
   <LI>HTML Authoring</LI>    
   <LI>HTML Help Authoring</LI>
   <LI>HTML References</LI>
   <LI>HTML Applications (HTA)</LI>
   <LI>DHTML General Info</LI>    
   <LI>DHTML References</LI>
   <LI>Document Object Model</LI>
   <LI>DHTML Behaviors</LI>
   <LI>Data Transfer</LI>    
   <LI>Editing Component</LI>
   <LI>Accessibility</LI>
   <LI>Scripting/Programming</LI>
   <LI>CSS</LI>    
   <LI>Dynamic Styles</LI>
   <LI>Dynamic Properties</LI>
   <LI>Forms</LI>
</UL>

</FONT>
</BODY>
</HTML>

Figure 6 Textframe.htc

  <PUBLIC:COMPONENT tagName="textframe">
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />

<PUBLIC:PROPERTY NAME="border" />
<PUBLIC:PROPERTY NAME="backcolor" />

<SCRIPT LANGUAGE="jscript">

function DoInit() {
        SetDefaults();
        BuildTable();
}

function SetDefaults() {
    if (border == null)     
        border = 1;
    if (backcolor == null)     
        backcolor = "beige";
}

function BuildTable() {
    htmlText = "";
    htmlText += "<table cellpadding=2 cellspacing=0 
                  bordercolor=#000000 ";
    htmlText += "border=" + border + " bgcolor=" + backcolor + ">"; 
    htmlText += "<tr><td>";
    htmlText += element.innerHTML;
    htmlText += "</td></tr>";
    htmlText += "</table>";
    
    element.innerHTML = htmlText;
}

</SCRIPT>

</PUBLIC:COMPONENT>

Figure 9 Embedding a File

  <PUBLIC:COMPONENT tagName="include" literalContent=True>
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />

<PUBLIC:PROPERTY NAME="src" />

<SCRIPT LANGUAGE="jscript">
var sourceCode;

function DoInit() {
    theBody.startDownload(element.src, OnDone);
    element.innerHTML = sourceCode;
}

function OnDone(s) {
    sourceCode = s;    
}    

</SCRIPT>
<BODY id="theBody" style="behavior:url(#default#download)">
</BODY>
</PUBLIC:COMPONENT>

Share via

Figure 2 Color Picker

Additional resources