Content

Composite Images

Image Structures and Simple Menu Elements 

Image Structures

There are a number of predefined composite image types that define how image slices are combined to create a single composite image that can be stretched while preserving their design integrity. Each type is actually a HTML “snippet” into which images will be substituted. That is the key to understanding how the image is to be inserted. 

There are three ways that images are used in these structures:

• Tiled – Typically used for sides and tops of images or any portion that will stretched as the entire image is stretched.
• Stretched – Used for parts of the image that may be stretched slightly.
• Fixed – Images that will always retain their size such as corners.

Menu Element - Simple

Typically used for buttons that don’t have a middle part, such as small arrows on the right or left.  Although they can be used for gradient effects (i.e. 3-D buttons), because the heights are fixed, the text may spill out if a menu element spans multiple lines.  At present we have no robust way to generate 3-D menu elements,  therefore, this effect should be avoided.

Image	Type	Notes
Left	Tiled
Center	Stretched	Background image over the text of the menu element that is tiled horizontally and center positioned.
Right	Fixed

Examples:

The left slice of the image contains the arrow icon, the rest of the image is transparent. The middle and right slices of the image are not used. This configuration is fully scalable.

This example uses all three parts of the element:  The middle slice would actually be one pixel wide and tile. Since the middle slice is fixed vertically, this type of image is not scalable.  Long page names will wrap to two lines and spill over the edge of the button, therefore although it may look good, it is not recommended.