Home arrow HTML arrow Page 7 - Submitting a Form Using an Image Tag
HTML

Submitting a Form Using an Image Tag


There are a number of ways to make the forms on your website more user friendly. This article will explain one way of doing this, which eliminates a page reload and replaces it with an image generated on the server.

Author Info:
By: Chris Root
Rating: 5 stars5 stars5 stars5 stars5 stars / 25
April 18, 2005
TABLE OF CONTENTS:
  1. · Submitting a Form Using an Image Tag
  2. · Submitting a Form
  3. · Processing the Form
  4. · The Server Side Code
  5. · GD Methods
  6. · Handling the Name
  7. · The TextBox Class
  8. · From the Top

print this article
SEARCH DEVARTICLES

Submitting a Form Using an Image Tag - The TextBox Class
(Page 7 of 8 )

When creating an instance of the textBox, we will need five values. The first two are the font size and font we are using, followed by the image resource for the background image and the string of text. The fifth argument is an offset parameter. As it turns out, GD has a bug: the descenders in a text string are not taken into account when calculating the bounding box of the text (the baseline is used instead).

The offset argument is meant to pad the height measurement, in order to avoid any problem with lines running together. This will need to be adjusted based on the font and the font size that you use. It isn't a perfect solution, but it is better than the mess you would get without it. Below is the code for the textBox class.

<?php

class textBox

{

       var $h = 0;

       var $w = 0;

       var $hpos = 0;

       var $textStr = "";

       var $fontSize = 12;

       var $font = "";

       function textBox($fontSize,$font,$image,$str,$offset)

       {

              $this->h = $this->getBoxHeight($fontSize,$font,$str,$offset);

              $this->w = $this->getBoxWidth($fontSize,$font,$str);

              $this->gethorzcoordinates($image);

              $this->textStr = $str;

              $this->fontSize = $fontSize;

              $this->font = $font;

       }

       function getBoxWidth($tsize,$fontPath,$str)

       {

              $bbox = imagettfbbox($tsize,0,$fontPath,$str);

              $w = $bbox[4] - abs($bbox[6]);

              return $w;

       }

       function getBoxHeight($tsize,$fontPath,$str,$offset)

       {

              $bbox = imagettfbbox($tsize,0,$fontPath,$str);

              $h = abs($bbox[7]) - $bbox[1];

              return ($h + $offset);

       }

       function gethorzcoordinates($im)

       {

              $s = imagesx($im);

              $this->hpos = ($s - $this->w)/2;

       }

}

?>

If you haven't written any PHP classes before, but have experience with Javascript, this code syntax will seem familiar. First of all, we have some object properties that are initialized. The keyword "var" is used, and this is the only place in PHP that you will see it. Also, you may notice that the keyword "this" is used. This keyword is used in the same manner that it is used in Javascript objects where it refers to the parent object, there must be a "$" character in front of it, however.

The methods in textBox can be treated as private, though there really is no such thing as private methods in PHP. All textBox methods are called by the constructor function when an instance is created, and are intended to get the dimensions of the text bounding box and the necessary x coordinate of the left side of the box for horizontal centering.

function getBoxWidth($tsize,$fontPath,$str)

{

       $bbox = imagettfbbox($tsize,0,$fontPath,$str);

       $w = $bbox[4] - abs($bbox[6]);

       return $w;

}

function getBoxHeight($tsize,$fontPath,$str,$offset)

{

       $bbox = imagettfbbox($tsize,0,$fontPath,$str);

       $h = abs($bbox[7]) - $bbox[1];

       return ($h + $offset);

}

Getting the dimensions of the bounding boxes requires the imagettfbox() function and a little math. The arguments include the text size, the angle (0 in this case), the font and the text string. This function returns an array that contains the x and y coordinates of each corner of the text bounding box in relation to the text. The x coordinate of the top left corner (which is in index 6) will come out as a negative number. Use the abs() function to get its absolute value, and then subtract it from the x coordinate of the upper right corner (index 4) to get the width of the text box.

Getting the box height requires subtracting the y coordinate of the bottom left corner from the absolute value of the y coordinate of the top left corner. We then return this value added to the offset that we established earlier.

function gethorzcoordinates($im)

{

       $s = imagesx($im);

       $this->hpos = ($s - $this->w)/2;

}

The final method will give us a position to the right of the edge of our background image to place the text. The imagesx() function is used to get the width of the background image. The width of the text box is then subtracted from that number and the result divided by two, thus giving us an x coordinate for our text block.

As I mentioned before, getting the vertical position in which text should be placed depends on how many text blocks we have. The vertical position is determined outside of the textBox class in a separate function called getVerticalPosition().

function getVerticalPosition($image)

{

       global $blockSize;

       $iw = imagesy($image);

       $pos = ($iw - $blockSize)/2;

       return $pos;

}

This function accepts a single argument that is the image resource of our background image. It uses the imagesy() function to obtain the height of the background image. We then subtract the global $blocksize (which you may remember is the total height of all text boxes combined with offset) from the height of the background image, and divide the result by 2. This will give us a y coordinate for all the text we will be writing to the background image.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials