HTML Buttons with an image

September 1, 2004 IT, Java, Web HTML5 CSS3 5 Comments

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.

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

  </style>
</head>
<body>
<input type="button" class="pbutton" accesskey="p" onclick="alert('clicked')"/>
<body>
</html>

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..

HTML Buttons with an image button

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

<meta http-equiv="msthemecompatible" content="no">

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(<bean :message key="buttons.pushme"/>);
....

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

Related Posts

About The Author

Leon van Tegelen

Consultant at AMIS

5 Comments

  1. Zoltan Andrasi January 18, 2007

    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. http://technology.amis.nl/blog/index.php?p=145 November 13, 2005

    http://technology.amis.nl/blog/index.php?p=145

  3. leon September 2, 2004

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

  4. James September 2, 2004

    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]

  5. James September 2, 2004

    having to create an image for every button is a bit of a bummer.

    Maybe you could try something like:

    push me

    use css to style is into a square button..