Using Images for Buttons

If you wish to use images for the buttons on a form, there are several alternative solutions. The method described below creates a new generic theme function that enables the use of images for the submit buttons throughout your site. This approach requires you to make two changes to your template.php file (and of course, you need to provide an image).

The first bit of code is necessary to overcome several issues in the system and to provide proper IDs for the image. The code:

function phptemplate_button($element) {

// following lines are copied directly from form.inc core file: // Make sure not to overwrite classes if (isset($element['#attributes,][,class'])) {

$element['#attributes,][,class'] = 'form-'. $element['#button_

// My change is type="' . (($element['#button_type'] == "image") ? // 'image' : 'submit' ) . '"

return '<input type="' . (($element['#button_type'] == "image") ? 'image' : 'submit' ) . '" '. (empty($element['#name']) ? '' :

'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($el ement['#attributes']) ." />\n"; }

The second bit of code is required to place the button on the form. If you wanted, for example, to now use an image for the submit button of your Theme Search Form, you would add the following to your template.php file:

function phptemplate_search_theme_form($form) { $form['submit,][,#theme'] = 'button'; $form['submit']['#button_type'] = 'image'; $form['submit']['#attributes'] = array(

'src' => base_path() . path_to_theme() . '/images/btn-search-

return drupal_render($form); }

Now, assuming you have an image file named properly and uploaded to the proper directory (that is, /images/btn-search-submit.png), you should be done. Note that you will need to repeat this exercise for each form where you wish to use an image for the submit button.

The code for the function phptemplate_button, above, was originally I

published on the Drupal.org site and is included in the snippets section. I This is worth watching for additional discussion and revisions from the community. Visit http://drupal.org/node/144 7 5 8. I

Was this article helpful?

0 0

Post a comment