HTML Buttons with an image

5

In HTML it is possible to define an accesskey for a control. For example if you want to have a button which the user can click using the hot-key alt-p., you can do this with the following HTML

<input type="button" value="push me" accesskey="p" onclick="alert('clicked')"/>

It is not possible to underline the first letter with the value attribute to indicate the hot-key. You could use the < input type=image> . But then you would have to use different images and javascript to mimick button behavior when clicked.
Again CSS comes to the rescue.

&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .pbutton {
       background:url(push.gif);
       width:200px;
       height:40px;
     }

  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="button" class="pbutton" accesskey="p" onclick="alert('clicked')"/&gt;
&lt;body&gt;
&lt;/html&gt;

I created an image with a text with an underlined first letter the same dimensions as mentioned in the style (40px by 200px). And voila , Bob’s your uncle..

IE XP bug

I innitially used background-image in the style sheet declaration. But apparently there is a freaky IE bug related to XP themes .. (click here)

One of the things I picked up from that site is that you can disable the themes on a page using a meta tag

&lt;meta http-equiv="msthemecompatible" content="no"&gt;

I18N in Struts

As with all images, I18N of these buttons is a bit harder in dynamically generated pages …
In a struts application you would probably get away with something like

....
   background:url(&lt;bean :message key="buttons.pushme"/&gt;);
....

In the resource bundles you would add an entry like

buttons.pushme=push_fr.gif
   

for the french resourcebundle
or

buttons.pushme=push_en.gif
   

for the english resourcebundle

and then create the corresponding images with the appropriate text.

One drawback is that you would have to include the style in every JSP instead of in an external css file. But a JSP include would solve that without much effort

Share.

About Author

5 Comments

  1. Zoltan Andrasi on

    What do you think about collapsing the button [input type=”button” id=”pushButton” accesskey=”p” style=”visibility:collapse” /] and replacing it with a label assigned to it: [label for="pushButton"][u]P[/u]ush me![/label]

  2. Good points! I hadn’t thought of the accesskey not being present on the text on the button in some languages !

  3. oops. html allowed.

    anyway you’d be better off to write a custom tag do do this button for you.

    you could define the accesskey, and if the accesskey was not found in the word to be displayed, display the accesskey afterwards in brackets:

    eg:

    someForeignWord [p]