It is important to be aware of the issues involved with the creation of graphics on the fly. The first is that it is relatively costly in terms of CPU time. In most cases the flexibility of dynamic graphics is not worth what you pay in the load imposed on the server. Another issue is that making nice-looking graphics from PHP functions is not easy. Common techniques like drop shadows are next to impossible. As you will see in the examples that follow, a lot of work goes into creating simple, flat charts. Last, while there is adequate support for text, functions you'd expect in a word processor do not exist. Text does not wrap at line ends. There is no concept of leading, spacing, or descenders. Regardless, generating graphics makes sense in some situations.
Images wrapped in anchor tags are a common navigational device. Instead of plain text, this method allows you to create buttons similar to those created in the operating system, or even fanciful icons. In most cases it is best to leave these as graphics created in your favorite graphics editor, because the time between changes is relatively long. On the other hand, if you have a button that changes often, it may make sense to create it dynamically with PHP. The content of the button, the label, needs to be available as a string in PHP. It could be a statement setting the value of a variable. It could also be a value retrieved from a file or a database.
An illustration will make this idea clear. Many corporate Web sites have a section for press releases. Instead of just a list of text links, your client wants a graphic of a flaming newspaper for each press release, all under the title "Hot off the Press." Each burning newspaper has text over the top with the headline from the press release. With a small company that issues only one press release a month, you are better off creating these graphics by hand. With a company that issues a press release each week, it starts to make sense to automate the process. You can put the press releases into a database and generate a graphic on the fly as surfers view the list of press releases. One advantage of this approach is that if the CEO finds out you're putting flaming newspapers on the site, you can make a minor modification and the graphics become the company logo with the press-release title over it.
Seriously, you must consider the tradeoffs associated with dynamically created graphics. You don't want to save yourself 15 minutes a month if it makes every page download 30 seconds longer. If you've been working with the Web for any time at all, you know to reuse graphics throughout the site because the browser caches them. The first page may take longer to load, but each successive page is faster because the graphics are already loaded in the browser. Dynamic graphics can be cached, of course, but the browser uses the URL to cache files. The GET-method form variables are part of the may create two identical graphics but are different as far as the browser cache is concerned.
These are only some of the issues involved with dynamic buttons. To demonstrate the process, I'll provide an example and describe the steps. This is a script that creates a JPEG of a button with a text label. The button is rectangular and has some highlighting and shadowing. The label has a drop-shadow effect applied to it and is centered both vertically and horizontally.
** JPEG button
** Creates a graphical button based
** on form variables.
//set parameters if not given
$ButtonWidth = 100;
$ButtonHeight = 30;
$ButtonLabel = "CLICK";
$ButtonFont = 5;
//create image and colors
$image = imagecreate($ButtonWidth, $ButtonHeight);
$colorBody = imagecolorallocate($image, 0x99,
$colorShadow = imagecolorallocate($image, 0x33,
$colorHighlight = imagecolorallocate($image, 0xCC,
//create body of button
1, 1, $ButtonWidth-2, $ButtonHeight-2,
//draw bottom shadow
//draw right shadow
//draw top highlight
//draw left highlight
//determine label size
$ButtonLabelHeight = imagefontheight($ButtonFont);
$ButtonLabelWidth = imagefontwidth($ButtonFont) *
//determine label upper left corner
$ButtonLabelX = ($ButtonWidth -
$ButtonLabelY = ($ButtonHeight -
//draw label shadow
The first step the script takes is to make sure it has valid information for all the parameters. These include the size of the button and the text with which to label the button .The next step is to create an image. There are two ways to do this. You can create an image of a specific size which is blank, or you can load an existing JPEG. I've chosen the former because it allows the script to make buttons of any size. You can make much more stylish buttons using the latter method. This is another good exercise.
The button will be drawn with three colors: a body color, a highlight color, and a shadowcolor. I've chosen to go with three shades of gray. These colors must be allocated with the imagecolorallocate function. Using the body color, the script makes a rectangle that is one pixel smaller than the entire image. The border around this rectangle is created with four lines. The lines on the bottom and right sides are drawn in the shadow color, and the top and left sides are drawn with the highlight color. This creates an illusion of the button being three-dimensional.
To finish the button, the script draws the label. First the text is drawn slightly off center in the shadow color. Then the text is drawn in the highlight color over it and exactly centered, making the text look as though it is floating over the button.
At this point the script has created the image and needs to send it to the browser. It is very important that the header be sent to let the browser know that this file is a JPEG. Without it, you get a garbled bunch of strange characters.
This wraps up the script that creates a button, but to really make use of it, we have to use it in the context of a Web page. I've created an array of four button labels I want to create. I then loop through the array, each time creating an image tag. The source of the image is the previous script. I pass the script some parameters to set the size of the button and the label. I leave the font as the default, but I could have set that as well.
Creating Button Dynamically