The ABCs of HTAs: Scripting HTML Applications

  • Article

HTAs

Run a Script from a Text Link

You know, no sooner do people start writing HTAs – with all the attendant buttons and radio buttons and check boxes and other fancy user interface elements – then they inevitably ask the question: how can I get a script to run when a user clicks on some text? Text? This is the year 2005; nobody uses text any more!

Ah, but the Scripting Guys aren’t here to judge; we’re here to help. There are a couple different ways that you can get a script to run when a user clicks on a bit of text; we’ll show you how to do this using the <SPAN> tag.

Here’s a very simple little HTA that includes a span named ClickableSpan; click the text inside the span and the subroutine named RunScript will execute:

<html>
<head>
<title>Running a Script from Text</title>

<HTA:APPLICATION 
     ID="objScriptFromText"
     APPLICATIONNAME="Running a Script from Text"
     SCROLL="auto"
     SINGLEINSTANCE="yes"
>

</head>

<SCRIPT Language="VBScript">

Sub RunScript
    Msgbox "The script has run."
End Sub

</SCRIPT>

<body bgcolor="buttonface">

<span id="ClickableSpan" onClick="RunScript" >
Click here to run the script</span>

</body>
</html>

The part we really care about is the part where we define the span:

<span id="ClickableSpan" onClick="RunScript" >
Click here to run the script</span>

All we do is create a span with the id ClickableSpan; we then specify that whenever anyone clicks on the span (that is, whenever the onClick event is fired) we run the subroutine RunScript. That’s all we have to do. When we start the HTA and click our text link, we get something just like this:

Text Link

Well, maybe there is one more thing. If you run the preceding HTA, you’ll notice that it works just fine. However, when you place the cursor over the span, the cursor changes from an arrow to an I-beam, as if you were about to edit the text. That’s not particularly good user interface design. What we need to do is make it clear to people that this is a clickable link. And the best way to do that is to change the cursor accordingly. When someone runs the mouse over our span the cursor should change to a pointing hand, Internet Explorer’s way of indicating a clickable object. Likewise when we move away from the span, the cursor should change back to the default value (the arrow).

So can we do that? Hey, you knew the answer before you even asked:

<html>
<head>
<title>Running a Script from Text</title>
<HTA:APPLICATION 
     ID="objScriptFromText"
     APPLICATIONNAME="Running a Script from Text"
     SCROLL="auto"
     SINGLEINSTANCE="yes"
>
</head>

<SCRIPT Language="VBScript">

Sub RunScript
    Msgbox "The script has run."
End Sub

Sub Pointer
    document.body.style.cursor = "hand"
End Sub

Sub DefaultCursor
    document.body.style.cursor = "default"
End Sub

</SCRIPT>

<body bgcolor="buttonface">

<span id="ClickableSpan" onClick="RunScript" onmouseover="Pointer" 
onmouseout="DefaultCursor">
Click here to run the script</span>

</body>
</html>

What we’ve done is added two new elements to our span: onmouseover and onmouseout. In other words, our span now looks like this:

<span id="ClickableSpan" onClick="RunScript" onmouseover="Pointer" 
onmouseout="DefaultCursor">
Click here to run the script</span>

All we’re saying here is that when the mouse runs over (onmouseover) the span a subroutine named Pointer should run; when the mouse leaves the span (onmouseout) a subroutine named DefaultCursor should run. As you probably guessed, Pointer simply sets the cursor to the pointing hand:

Sub Pointer
    document.body.style.cursor = "hand"
End Sub

Likewise, the DefaultCursor subroutine does nothing more than set the cursor back to the default value:

Sub DefaultCursor
    document.body.style.cursor = "default"
End Sub

And so now, at long last, you can include link text in your HTAs. Will wonders never cease?