G30 Image Overlay

While this component can be used with any size image, it works best with larger images because it is meant to display as a block level element. The default state of this component places the orange arrows to the left of the label text. This placement is preferred since positioning is based on the left edge of the overlay label, so any copy or font size changes will not affect the positioning of the arrows.

Each LI tag in this component must have a top and left style set in order to position it over the image (e.g. style="top:78px;left:10px"). These values should be in "px" and they are relative to the top left origin of the image. The overlay text is meant to be a short label, for Firefox and other capable browsers this the overlay's width is limited to 190px, however this max-width does not work in Explorer so it should not be relied upon. If you have a text that is semi-long, or if it is positioned to the right edge and the text is forced to a small width an optional width value may be set to the force the label to a specific width (e.g. style="top:78px;left:10px;width:180px").

In some cases, a label may need to be placed to the right edge of an image. In such instances, it may be better to have the orange arrow to the right of the label. To do this, set the class of the label's LI tag to "right" as shown in the "Australia" label below. (e.g. <li class="right">)

As shown in the example, a label may be a link or simply plain text. When using plain text, the label must be enclosed in a SPAN tag in order to allow for CSS styling. DO NOT use a SPAN tag inside an A tag.

This example shows a usage with all orange arrows on the right. This is meant to support right-to-left instances, or cases where it is better to have all labels presented this way. Right alignment for all labels can be achieved by setting the class of the UL tag to "right" (e.g. <ul class="right">).

Like the standard example there are times when one or two labels may be on the edge of the image and you may not want it to protrude outside the image. In these cases you can set the class of the label's LI tag to "left" as shown in the "Hawaii" label below. (e.g. <li class="left">)