Wrench value from your Creo Investments Home Measure the benefits Simple Automation can bring Why
Automate?
A personal way to do PDM Peer to Peer
PDM
3D Drawings Model Based
Design
Smooth out unwanted sharp edges Other
Articles
www.proetoolbox.co.uk - Simple Automation made Simple

Using Sprite Images

Many Pro/Web.Link applications use images as icons for a user interface. Any one user interface will have many images associated with it. This article demonstrates the Sprite technique whereby all the user interface resources can be combined into a single image file and each individual 'icon' is displayed to the user by the magic of CSS. A more indepth account of Sprites can also be viewed at 'A List Apart'.

<html>
<body>
<style>
.Command
{
  background: url("Sprite.png");
  width: 16px;
  height: 16px;
  border: 0px;
  overflow: hidden;
  cursor: pointer;
}
#PartIcon
{
  background-position: 0px 0px;
}
#AsmIcon
{
  background-position: 0px -16px;
  cursor: crosshair;
}
#DrwIcon
{
  background-position: 0px -32px;
  cursor: move;
}
</style>

<DIV id=PartIcon class=Command></DIV>
<DIV id=AsmIcon class=Command></DIV>
<DIV id=DrwIcon class=Command></DIV>
</body>

</html>

What is a Sprite?

A Sprite is essentially a larger image that is made up of a number of 'stiched together' images. In the picture below you can see how my example Sprite is simply a collection of the icons for Part, Assembly and Drawing.

To use the sprite, custom CSS classes are defined, see how '.Command' defines the general properties for all Commands and then each icon (e.g. '#PartIcon') has it's particular attributes defined. Most importantly the 'background-position' property is set to 'scroll' the sprite image down to the appropriate point.

 
<html>
<body>
<style>
.Folder
{
  background: url(Folder_Sprite.png);
  width: 16px;
  height: 16px;
  border: 0px;
  overflow: hidden;
  cursor: pointer;
  background-position: 0px 0px;
}
.FolderHover
{
  background: url(Folder_Sprite.png);
  width: 16px;
  height: 16px;
  border: 0px;
  overflow: hidden;
  cursor: pointer;
  background-position: 0px -16px;
}
</style>

<DIV id=Ex class=FolderIcon 
  onmouseover=
   "JavaScript: Ex.className='FolderHover'" 
  onmouseout=
   "JavaScript: Ex.className='Folder'">
</DIV>

</body>
</html>

Using a Sprite for Button Roll-overs

The Sprite method lends itself very well to the definition of roll-over behaviour. This is when you wish the icon to be replaced with another (typically similar) image to indicate you are over it.

There is a need to define and use the CSS differently when you wish to use the technique for roll-overs. Unless you want to populate the <DIV> tags with additional <A> tags you won't have access to the pseudo styles of A:hover. In this case (as shown right you would need to write a little inline JavaScript to get the desired roll-over behaviour.

 

Conclusion

Sprites provide a way to logically setup images for icons and control the cursor for them in a somewhat seperated manner from the code. This makes them ideal for use with a standard template from which you define further Simple Automation applications. You can download the examples here.