Creating Chrome Images

Chrome images as simply the smallest necessary images required to create an artistic border around a rectangle. There are eight images; one for each corner and one for each side of the rectangle.

The simplest way to create set of chrome images is to start with a graphic of a rectangle that already has the border effect you want. Many graphics programs easily make these type of bordered rectangles. We'll start with this image of a blue rectangle with raised beveled edges, created using a popular graphics application:

When creating images like this, keep rounded corners small, as they determine the margins within the rectangle where text can be drawn. The figure below shows lines that separate the corners from the edges:

If the corners were rounded any more than this, the inner area that can be used for text (the square within the white lines) will get smaller, and the borders will get thicker.

With your graphics program, cut out the four corners of the graphic and save them as separate files. The widths of both left corners must be equal, as well as the widths of both right corners, although the width of the left corners do not have to be equal to the width of the right corners. You should have four files that look like these (magnified 10x, and placed on a silver background so that you can see which pixels are transparent):

top left		bottom left		top right		bottom right

The Menu sample depends on the browser to automatically stretch and resize these images to fit along the actual border around your menu items, so you only need to provide images that are one pixel across by however many pixels it takes to match the size of the two adjacent corners.

The thinly spaced double lines crossing the center of the rectangle horizontally and vertically, along with the corner lines, show the size of the images needed along the borders. Cut out four images from along each edge, and save them as separate files. You should have four files that look like these (magnified 10x):

top		left		right		bottom

When put all together (without any stretching or resizing), the chrome border looks like this (magnified 10x):

Notice that the center of the image is not used. It is up to you to specify background colors for internally placed menu items using CSS in the SetDynamicStyles method.

As previously stated, the Menu sample depends on the browser to resize the edge images. When stretched, the edges will appear something like this:

This provides a stretchable, resizable border around your menu.

Note: if the left and right edges of the your menu do not stretch far enough, it could be because your browser does not vertically stretch the left and right images enough. The way to deal with this problem is to use the SetSize method of the menu, and make sure that the text within each menu item can be displayed on a single line within that size. See this in action in Flyout Menus.