HTML Buttons with an image

Leon van Tegelen 5
0 0
Read Time:1 Minute, 43 Second

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

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

About Post Author

Leon van Tegelen

Consultant at AMIS
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

5 thoughts on “HTML Buttons with an image

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

Comments are closed.

Next Post

Report of Webforms evening

The Knowledge Centre Designer & Forms has had a meeting on the 30th of august 2004. The theme of this evening was Webforms. First there was a short overview presentation by Maurik-Jan. Then Harm, Lucas and Anton did thorough presentations about respectively Webutil, Architecture and migration. After the presentations there […]
%d bloggers like this: