Creating sprite images for toolbar buttons

When creating a toolbar component, one option for the display of the toolbar icon is to use a "sprite image" which allows the icon to change its appearance - say, its color - whenever the mouse pointer is over the icon. This is a good visual cue to let users know that they are in the active area for the button.

Specifications for the sprite image

The sprite image must meet these specifications:

  • The dimensions of the image must be exactly 25 pixels wide by 50 pixels high.
  • The image must be formatted as .png with a transparent background.
  • The image must consist of two glyphs, one for the default state and one for the hover state:
    • The dimensions for each glyph cannot exceed 16 pixels by 16 pixels.
    • The glyph for the default state must begin 2 pixels from the left side and 1 pixel from the top.
    • The glyph for the hover state must begin 2 pixels from the left side and 26 pixels from the top.
  • The file for the image must contain "mgsprite" in the name; for example: mytbbutton_mgsprite.png

    This naming convention lets WinStudio know that it is a sprite image for the button and should be handled accordingly.

  • The image file can be:
    • Stored in the Mongoose file system. We recommend placing it in the same directory as the winstudio.exe file.
    • Imported into the application database using the Edit (menu) > Images dialog box.

After creating the sprite image, you must then implement it for the toolbar button.