Let Netpanel design your web site the way you want it.

Submit your web site to 15 major search engines quickly and easily at no charge.

Download some of our free 32-bit software programs for Windows.

Find every news story, article, and special feature ever published on Netpanel.

Take a moment to fill out our quick survey, and earn a free utility in the process.

ActiveX controls are reusable software components that can be used to add special functions to web sites or desktop applications. This article will focus on applying ActiveX to Internet web pages. Microsoft Internet Explorer 3.0 or higher is the only browser that has native support for ActiveX technology.

As this page loaded, you may have been prompted to install several ActiveX components. This only would have occurred if the controls used in this article aren't already on your system. If you are concerned about security, consider reading our article, ActiveX: A Security Risk?. If you declined the installation, our demonstrations will not function properly. However, once these ActiveX controls are on your system, you won't have to download them again, even when you come across them on other web sites.

Basically, an ActiveX control is added to a web page using the <OBJECT> and </OBJECT> container tags. There are many attributes that go along with these tags, such as ID, CLASSID, CODEBASE, TYPE, WIDTH, HEIGHT, and ALIGN. The ID attribute can be set to whatever you want, and is used to identify the control for use with scripts in your web page. The CLASSID is unique to each ActiveX component; it is by the CLASSID that you specify which control you are using. Additionally, the CODEBASE attribute can be set to the Internet location of the control itself (usually a file with the .ocx extension). This allows the browser to automatically download and install the control on your visitors' systems. The TYPE attribute is optional and will almost always be set to "application/x-oleobject," which is the MIME type for ActiveX controls. The three remaining attributes are fairly self-explanatory. WIDTH and HEIGHT are used to set the control's visual dimensions on the page, and the ALIGN attribute sets the control's relative position.

The use of these tags and attributes will become clear when you see them action. Aside from the <OBJECT> tag's various attributes, you also need to include <PARAM> tags within the <OBJECT></OBJECT> element. The <PARAM> tags have two attributes, NAME and VALUE. You use the NAME attribute to specify one of the control's properties, and the VALUE attribute to set it's value. The properties available to an ActiveX component vary from control to control. Again, this will become clearer when you look at actual examples.

We will present three separate ActiveX demonstrations. The first will simply be a control that displays information on the page, without any scripting. The second example will involve a simple VBScript. For more information on this type of scripting, you can read our Using VBScript article. The final example uses a combination of two controls; one of which is not visible on the page.

Demonstration #1

Control name: Label
Class ID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2

Demonstration:

HTML code:

<OBJECT ID="LabelOne" CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" CODEBASE="../../components/ielabel.ocx" ALIGN="baseline" WIDTH="100" HEIGHT="100">
<PARAM NAME="Caption" VALUE="Hello, world.">
<PARAM NAME="Angle" VALUE="45">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="Mode" VALUE="1">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#FFFFFF">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="12">
<PARAM NAME="FontItalic" VALUE="0">
<PARAM NAME="FontBold" VALUE="0">
<PARAM NAME="FontUnderline" VALUE="0">
<PARAM NAME="FontStrikeout" VALUE="0">
<FONT SIZE="1" FACE="Verdana">Your browser does not support ActiveX controls.</FONT>
</OBJECT>

Notes:

As you probably noticed, there are many <PARAM> tags associated with this ActiveX control. Also note that the <FONT SIZE="1" FACE="Verdana"> . . . </FONT> section of code is only displayed when the browser does not load the control. You can use any HTML you want in its place.

Demonstration #2

Control name: Label
Class ID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2

Demonstration:

HTML code:

<OBJECT ID="LabelTwo" CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" CODEBASE="../../components/ielabel.ocx" ALIGN="baseline" WIDTH="250" HEIGHT="30">
<PARAM NAME="Caption" VALUE="Press a button.">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="Mode" VALUE="1">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#FFFFFF">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="12">
<PARAM NAME="FontItalic" VALUE="0">
<PARAM NAME="FontBold" VALUE="0">
<PARAM NAME="FontUnderline" VALUE="0">
<PARAM NAME="FontStrikeout" VALUE="0">
<FONT SIZE="1" FACE="Verdana">Your browser does not support ActiveX controls.</FONT>
</OBJECT>

<FORM NAME="FormOne">
<INPUT TYPE="Button" NAME="BtnOne" VALUE="One">
<INPUT TYPE="Button" NAME="BtnTwo" VALUE="Two">
<INPUT TYPE="Button" NAME="BtnThree" value="Three">
<INPUT TYPE="Button" NAME="BtnReset" VALUE="Reset">
</FORM>

<SCRIPT LANGUAGE="VBScript">
<!--
Sub BtnOne_onClick
LabelTwo.Caption = "You pressed button one."
End Sub
Sub BtnTwo_onClick
LabelTwo.Caption = "You pressed button two."
End Sub
Sub BtnThree_onClick
LabelTwo.Caption = "You pressed button three."
End Sub
Sub BtnReset_onClick
LabelTwo.Caption = "Press a button."
End Sub
-->
</SCRIPT>

Notes:

This time, we needed to include a few form elements--the buttons--in our demonstration. We also used a simple VBScript to control the ActiveX component. The script responds to each button and correspondingly changes the Caption property of the control.

Demonstration #3

Control name: Label
Class ID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2

Control name: Timer
Class ID: 59CCB4A0-727D-11CF-AC36-00AA00A47DD2

Demonstration:

HTML code:

<OBJECT ID="LabelThree" CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" CODEBASE="../../components/ielabel.ocx" ALIGN="baseline" WIDTH="150" HEIGHT="150">
<PARAM NAME="Caption" VALUE="Watch this text.">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="Mode" VALUE="1">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#FFFFFF">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="12">
<PARAM NAME="FontItalic" VALUE="0">
<PARAM NAME="FontBold" VALUE="0">
<PARAM NAME="FontUnderline" VALUE="0">
<PARAM NAME="FontStrikeout" VALUE="0">
<FONT SIZE="1" FACE="Verdana">Your browser does not support ActiveX controls.</FONT>
</OBJECT>

<OBJECT ID="TimerOne" CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2" CODEBASE="../../components/ietimer.ocx" WIDTH="14" HEIGHT="14">
<PARAM NAME="Interval" VALUE="100">
</OBJECT>

<SCRIPT LANGUAGE="VBScript">
<!--
Sub TimerOne_Timer
LabelThree.Angle = (LabelThree.Angle + 10) mod 360
End Sub
-->
</SCRIPT>

Notes:

This example uses two ActiveX controls and a short VBScript. The Timer control is invisible on the page, but its Timer event is used by the script to modify the Label control. The script executes every Timer interval, which is 100 milliseconds in this case.

The Label and Timer controls are obviously not the most sophisticated ActiveX components that you can use. There are many other controls available for download, or you can make your own using a variety of commercial software development packages. You can look at c|net's ActiveX web site at http://www.activex.com for a lot of information about this technology.

Copyright © Michael Yigdall and Jonathan Strine
Any trademarks referenced or displayed
are property of their respective owners.
Last updated: 5/17/98