Creating submit buttons with images
Instead of the default and boring grey submit buttons, it's possible to use clickable images to submit forms. This has been possible with HTML for a long time.
Here's how to do it with the new forms api:
1) Place the following code in your module:
<?php
/**
* Custom form element to do our nice images.
*/
function hook_elements() { // Change this line
$type['imagebutton'] = array(
'#input' => TRUE,
'#button_type' => 'submit',
'#executes_submit_callback' => TRUE,
'#name' => 'op',
'#process'=> array('hook_imagebutton_process' => array()),
);
return $type;
}
function theme_imagebutton($element) {
return '<input type="image" class="form-'. $element['#button_type'] .'" name="'. $element['#name'] .'" id="'. $element['#id'] .'" value="'. check_plain($element['#default_value']) .'" '. drupal_attributes($element['#attributes']) . ' src="' . $element['#image'] . '" alt="' . $element['#title'] . '" title="' . $element['#title'] . "\" />\n";
}
function imagebutton_value() {
// null function guarantees default_value doesn't get moved to #value.
}
function hook_imagebutton_process($form) {
$form['op_x'] = array(
'#name' => $form['#name'] . '_x',
'#input' => TRUE,
'#button_type' => 'submit',
'#form_submitted' => TRUE,
);
return $form;
}
?>Be sure to "hook" in hook_elements() above with the name of your module.
2. Now use the following piece of code in your forms to create the submit button:
<?php
$form['submit'] = array(
'#type' => 'imagebutton',
'#image' => '/submit.jpg', // provide the path to your image here
'#default_value' => t('Login'), // original value of button text
);
?>Special thanks to Earl Miles, (aka merlinofchaos) for this tip.
Image button through CSS
I know this is an old thread, but I was just dealing with the same issue.
I did not want to deal with the IE intput type=image issues, and I did not want to have to dig quite as deeply into the Forms API code as the above poster did.
A method that *may* work for you is to us the CSS background property and make a standard submit button look like an image button.
for instance I just finished a mod to the login block which used this to display an image called go.gif instead of the standard submit button. The login form already attaches a class of form-submit to the button, so in my theme's style.css I put the line
#block-user-0 .form-submit {width:38px; height:37px;background:url(../../images/go.gif) no-repeat; border:none;}The main thing that will mess you up is that the button text will want to appear in front of the image. I have found 3 possible solutions:
1. theme the form (if it is themable) and remove the text from the button.
2. If (as in the case of the login) the form is not themable, you can hack the module to remove the text (i.e. '#value' => t('Log in') becomes '#value' => t(''))
3. (and probably the easiest) use CSS to hide the text. What I do is push it below the button's height and set overflow to hidden. Since the image I am using is 37px high I put 40px of top padding to push the text below the bottom. So my CSS becomes
#block-user-0 .form-submit {width:38px; height:37px;background:url(../../images/go.gif) no-repeat; border:none; padding-top:40px; overflow:hidden;}Works like a charm.
Hope someone else finds this handy!
Update for IE7Image button through CSS for IE7, IE6 and FF 1.5
jkopel pushes us into the right direction. Indeed IE7, IE6 and FF 1.5 treat intput type=image different in terms of return values. So this is clearly a no go for me as well.
But the CSS code doesn't work in IE7. The padding-top simply expands the button, instead of hiding the text. A simple font-size: 0px works on IE7, IE6 and FF 1.5. In my particular case the CSS code looks like this:
width: 16px;min-width: 16px;
height: 16px;
min-height: 16px;
background: transparent url(thomi_img/add_to_shopping_cart.png) no-repeat;
overflow: hidden;
border: none;
font-size: 0px
HTH
Quicker...
override theme_button();
add this
// input type
if (isset($element['#attributes']['src'])){
$type = 'image';
}
else {
$type = 'submit';
}
and replace submit with $type...
____________________________________________________
Tj Holowaychuk
Vision Media
350designs
Stationery Style Design Inspiration