Hey, Scripting Guy! Often-times while browsing the Internet I run across Web pages where they used a bulleted list, except that they use little pictures as the bullets. Can I add that type of a bulleted list to my HTAs?
— JA
Hey, JA. You know, as a long-time baseball coach, the Scripting Guy who writes this column knows exactly how to answer that question: That’s up to you, JA; do you believe that you can add that type of bulleted list to your HTAs? The truth is, the only thing that can stop you from adding that type of bulleted lists to your HTAs is yourself. As the immortal Magic Charlie so aptly put it, “Anything you can conceive and believe, you can achieve.”
Of course, we should note that, as a long-time baseball coach, the Scripting Guy who writes this column knows that none of that is really true. It’s great that you want to be a shortstop and it’s great that you truly believe that you can be a shortstop. However, it’d be even better if you could field ground balls and make the throw to first base. When it comes to playing shortstop, it’s not enough to believe that you can turn the double play; you have to actually be able to turn the double play.
Unless, of course, you play for the Seattle Mariners. In that case, actual ability seems to be optional.
So, in other words, no, JA, you can’t add that type of a bulleted list to your HTAs; it’s just not going to happen.
Well, not unless you use code like this, that is:
<html><head> <style> ul {list-style-image: url(“bullet.gif”)} </style> </head>
<body> <ul> <li>This is the first item in the list.</li> <li>This is the second item in the list.</li> <li>This is the third item in the list.</li> </ul> </body>
</html>
As it turns out, there are two things you need to do to create a bulleted list that uses pictures as the bullet. To begin with, you need to have a picture that you can use as a bullet; in our case that happens to be a graphics file named Bullet.gif, stored in the same folder as our HTA. Second, you need to create a style for the <UL> tag, the HTML element that creates a bulleted list. That style should look something like this:
<style>
ul
{list-style-image: url(“bullet.gif”)}
</style>
As you can see, what we’ve done here is define a global style that uses the file Bullet.gif for all the bulleted lists found in our HTA. To make that happen we define the style by specifying the desired HTML tag (<UL>) followed by the property values to be assigned to that tag. In this case we’re assigning a value to the list-style-image attribute, with that value being the url parameter followed by the location of the graphics file.
Believe it or not, that’s all we need to do. When we start this HTA any and all of our bulleted lists will use the file Bullet.gif as the bullet character:
You know, we never thought of that: what if we did want to use different bullet styles for different lists? Well, one way to do that is to use a so-called “inline style” rather than a globally-defined style. For example, take a look at the following HTA code; in this case we have one bulleted list that uses a graphic as the bullet and one list that doesn’t use a graphic as a bullet:
<html><body> <ul style=”list-style-image: url(‘bullet.gif’)” > <li>This is the first item in the list.</li> <li>This is the second item in the list.</li> <li>This is the third item in the list.</li> </ul> <p> <ul> <li>This is the first item in the list.</li> <li>This is the second item in the list.</li> <li>This is the third item in the list.</li> </ul> </body>
</html>
Notice that, this time around, we didn’t define a global style. Instead, we specified the value for the list-style-image attribute when we actually added the bulleted list to the HTA:
<ul style=”list-style-image: url(‘bullet.gif’)” >
Compare that syntax to the syntax for the second bulleted list in the HTA:
<ul>
Because there is no style parameter here, and because there is no global style defined for bulleted lists, we get the default bullet format. In turn, that means our HTA looks like this:
By using inline styles you can have as many different types of bulleted lists as you, well, have bulleted lists.
If you don’t like dealing with graphics you can also use the list-style-type attribute to modify the look of your bulleted lists. The list-style-type attribute accepts the following values:
|
Value |
Description |
|
disc |
Default. Solid circles. |
|
circle |
Outlined circles. |
|
square |
Solid squares. |
|
decimal |
1, 2, 3, 4, and so on. |
|
lower-roman |
i, ii, iii, iv, and so on. |
|
upper-roman |
I, II, III, IV, and so on. |
|
lower-alpha |
a, b, c, d, and so on. |
|
upper-alpha |
A, B, C, D, and so on. |
|
none |
No marker is shown. |
For example, suppose you define a new bulleted list using this syntax:
<ul style=”list-style-type: ‘lower-roman'”>
That’s going to give you a bulleted list that looks like this:
Not too bad, not too bad at all.
Incidentally, list-image-style and list-style-type are just two of the many attributes available to you when using Cascading Style Sheets (CSS). For more information, take a look at the CSS Reference information found on MSDN.
So apparently Magic Charlie was right after all: whatever you can conceive and believe you really can achieve. Unless you want to get technical about it, in which case you’d have to amend that to read “Whatever you can conceive and believe and the Scripting Guys can achieve you can then copy and paste into your HTA and use it as if you’d created it yourself.” But not only is that a bit of a mouthful, but it doesn’t rhyme, either. Maybe that’s why Magic Charlie decided to use Whatever you can conceive and believe, you can achieve instead. Once again we fail to get the credit we so richly deserve simply because it’s hard to find anything that rhymes with Scripting Guys.
0 comments