10. Other Advanced Controls
Introduction to QImageLabel
<< Previous   |   Back to Main   |   Introduction to QTreeNav >>

View Source
will open in a new window
Dynamically Created Image Labels
The QImageLabel allows you to create dynamically generated images based on text strings. The image label can also take font, size, color and positioning attributes to allow you to add a great level of sophistication/visual polish to your web applications.

The control requires the GD library. In order for fonts to render properly, you must provide either a TrueType (.ttf) file or a pair of PostScript Type 1 (.pfb and .afm) typeface files. Note that rendering TrueType will require the FreeType library, and rendering PostScript Type 1 will require the T1Lib library. See the PHP Documentation for more information. The typeface files can either be put in the current directory, or it can be placed in /includes/qform/fonts.

Note that events/actions can be defined on the image label, as we have defined a QClickEvent in our example QImageLabel below.

Finally, the QImageLabel provides a great deal of functionality to help layout the text string within the image itself. The width/height and internal positioning of the image is determined by the following steps:
  1. If no width/height is set, then calculate the bounding box. Set the Width or Height to be the dimensions of the bounding box, plus the PaddingWidth or PaddingHeight (if specified).
  2. Otherwise, if an alignment is specified, set the internal X- or Y- coordinate of the text to match the requested alignment (e.g. left/center/right or top/middle/bottom)
  3. Otherwise, set the internal X- or Y- coordinate to be the explictly specified XCoordinate or YCoordinate value
In our example below, we left Width and Height unspecified, and we set the padding width and height at 10.

Click me to toggle my message.

Messages that this image will toggle between:

Message 1:
Message 2:

Selected Font: