I've been going through icon libraries on my websites and combining images into CSS Sprite libraries. The master image file, or sprite, holds all the individual images in it. You then call them out by coordinates in style statements instead of using an IMG tag. Why? Using a sprite instead of 20 images can save space, but I think the real advantage is the download.

When creating a GUI with many different icons, the visitor's connection may not be as good as yours, or the internet just hiccups and their browser tries to display your application but has a few empty IMG placeholders. If you were to use a sprite instead the visitor's browser only downloads one file and your style statements just call it over and over for the different coordinates.

The bad new is that the img attribute of the CFTREEITEM tag does not allow you to use sprites. Not to worry, there is a workaround. Instead of using the img attribute, put a floating span in the display attribute instead.

For example:

<cfset ImageIcon="<span style='margin: 1px; float: left; width: 32px; height: 32px; background: URL(SpriteIcon.png) -32px -32px;'></span>">

You may find a better method, but I had to float the sprite and the text to the left to get a good tree alignment. Also, I've chosen to make my icons 32 pixels square, which also made it easier to map the coordinates in the sprite.

<cfform>
   <cftree name="MyTree" format="html">
      <cftreeitem value="Test" display="#ImageIcon#<span style='float: left;'>test</span>" >
   </cftree>
</cfform>

Obviously this tree is more of a telephone pole, but I hope you get the idea. For a more useful CFTREE, build a query to populate your ColdFusion tree and map to different coordinates in your CSS sprite library image. The example above has only been tested with Internet Explorer 8.

For more information on how to create CSS Sprites, try an internet search for: "css sprites".

If you find this post useful please leave a comment and let me know how you used the information.