{"id":65323,"date":"2007-03-14T01:41:00","date_gmt":"2007-03-14T01:41:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/03\/14\/how-can-i-use-graphics-in-an-htas-bulleted-list\/"},"modified":"2007-03-14T01:41:00","modified_gmt":"2007-03-14T01:41:00","slug":"how-can-i-use-graphics-in-an-htas-bulleted-list","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-use-graphics-in-an-htas-bulleted-list\/","title":{"rendered":"How Can I Use Graphics in an HTA\u2019s Bulleted List?"},"content":{"rendered":"

\"Hey, <\/H2>\n

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<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

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\u2019s up to you, JA; do you<\/I> 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<\/B><\/A> so aptly put it, \u201cAnything you can conceive and believe, you can achieve.\u201d<\/P>\n

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\u2019s great that you want to be a shortstop and it\u2019s great that you truly believe<\/I> that you can be a shortstop. However, it\u2019d be even better<\/I> if you could field ground balls and make the throw to first base. When it comes to playing shortstop, it\u2019s not enough to believe<\/I> that you can turn the double play; you have to actually be able<\/I> to turn the double play.<\/P>\n

Unless, of course, you play for the Seattle Mariners. In that case, actual ability seems to be optional.<\/P>\n

So, in other words, no, JA, you can\u2019t<\/I> add that type of a bulleted list to your HTAs; it\u2019s just not going to happen.<\/P>\n

Well, not unless you use code like this, that is:<\/P>

<html><\/p>\n
<head>\n    <style>\n        ul \n        {list-style-image: url(“bullet.gif”)}\n    <\/style>\n<\/head><\/p>\n
<body>\n    <ul>\n        <li>This is the first item in the list.<\/li>\n        <li>This is the second item in the list.<\/li>\n        <li>This is the third item in the list.<\/li>\n    <\/ul>\n<\/body><\/p>\n
<\/html>\n<\/PRE>\n
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:<\/P>
<style>\n    ul \n    {list-style-image: url(“bullet.gif”)}\n<\/style>\n<\/PRE>\n
As you can see, what we\u2019ve 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\u2019re assigning a value to the list-style-image<\/B> attribute, with that value being the url<\/B> parameter followed by the location of the graphics file.<\/P>\n
Believe it or not, that\u2019s 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:<\/P>\"HTA\" \n

You know, we never thought of that: what if we did<\/I> want to use different bullet styles for different lists? Well, one way to do that is to use a so-called \u201cinline style\u201d 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\u2019t use a graphic as a bullet:<\/P>
<html><\/p>\n
<body>\n    <ul style=”list-style-image: url(‘bullet.gif’)” >\n        <li>This is the first item in the list.<\/li>\n        <li>This is the second item in the list.<\/li>\n        <li>This is the third item in the list.<\/li>\n    <\/ul>\n    <p>\n    <ul>\n        <li>This is the first item in the list.<\/li>\n        <li>This is the second item in the list.<\/li>\n        <li>This is the third item in the list.<\/li>\n    <\/ul>\n<\/body><\/p>\n
<\/html>\n<\/PRE>\n
Notice that, this time around, we didn\u2019t 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:<\/P>
<ul style=”list-style-image: url(‘bullet.gif’)” >\n<\/PRE>\n
Compare that syntax to the syntax for the second bulleted list in the HTA:<\/P>
<ul>\n<\/PRE>\n
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:<\/P>\"HTA\" \n

By using inline styles you can have as many different types of bulleted lists as you, well, have bulleted lists.<\/P>\n
If you don\u2019t like dealing with graphics you can also use the list-style-type<\/B> attribute to modify the look of your bulleted lists. The list-style-type attribute accepts the following values:<\/P>\n\n<\/THEAD>\n\n\n\n\n\n\n\n\n\n\n\n
\n
Value<\/B><\/P><\/TD>\n
\n
Description<\/B><\/P><\/TD><\/TR>\n
\n
disc<\/P><\/TD>\n
\n
Default. Solid circles.<\/P><\/TD><\/TR>\n
\n
circle<\/P><\/TD>\n
\n
Outlined circles.<\/P><\/TD><\/TR>\n
\n
square<\/P><\/TD>\n
\n
Solid squares.<\/P><\/TD><\/TR>\n
\n
decimal<\/P><\/TD>\n
\n
1, 2, 3, 4, and so on.<\/P><\/TD><\/TR>\n
\n
lower-roman<\/P><\/TD>\n
\n
i, ii, iii, iv, and so on.<\/P><\/TD><\/TR>\n
\n
upper-roman<\/P><\/TD>\n
\n
I, II, III, IV, and so on.<\/P><\/TD><\/TR>\n
\n
lower-alpha<\/P><\/TD>\n
\n
a, b, c, d, and so on.<\/P><\/TD><\/TR>\n
\n
upper-alpha<\/P><\/TD>\n
\n
A, B, C, D, and so on.<\/P><\/TD><\/TR>\n
\n
none<\/P><\/TD>\n
\n
No marker is shown.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
For example, suppose you define a new bulleted list using this syntax:<\/P>
<ul style=”list-style-type: ‘lower-roman'”>\n<\/PRE>\n
That\u2019s going to give you a bulleted list that looks like this:<\/P>\"HTA\" \n

Not too bad, not too bad at all.<\/P>\n
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<\/B><\/A> information found on MSDN.<\/P>\n
So apparently Magic Charlie was right after all: whatever you can conceive and believe you really can<\/I> achieve. Unless you want to get technical about it, in which case you\u2019d have to amend that to read \u201cWhatever 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\u2019d created it yourself.\u201d But not only is that a bit of a mouthful, but it doesn\u2019t rhyme, either. Maybe that\u2019s why Magic Charlie decided to use Whatever you can conceive and believe, you can achieve<\/I> instead. Once again we fail to get the credit we so richly deserve simply because it\u2019s hard to find anything that rhymes with Scripting Guys<\/I>.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-65323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/65323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=65323"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/65323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=65323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=65323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=65323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}