[birdie_nam_nam]

Hello, dear friends!

Do anyone know an easy way to put a small image in addition to the normal text in a HTML button. That is, I'd like to make a function to work with all my buttons, something like:

<INPUT
TYPE="button"
NAME="Close"
STYLE="padding-left: 30px"
VALUE="Close"
onLoad="AddIcon('Smiley.gif')">


And the function (AddIcon) would put the image "Smiley.gif" into the button, like in the image attached.

Best regards, Sebastian.

[jimcart]

see attached --

you may want to add an onclick event to the image
and you will probably also need your buttons to be in separate cells

The other drawback is the fact that browsers leave a gap under the button the exact height of the image.

other than that it works

[birdie_nam_nam]

Very nice! Thanks!

Guess that your code is automaticly gererated from some software. If you get rid of the table and div tags, you will not have the problem you described. Thanks a lot!

/Sebastian.

[jimcart]

Hi,

I got rid of the div tags -- just needed to change the relative positioning and sure enough it works perfect.

Thanks for the tip.

Regards,
Jim.

[birdie_nam_nam]

Hello again Jim!

Found a much easier and clean way to do the thing. Not JavaScript but two ways that works fine:

Code:

<BUTTON TYPE="submit">
  <IMG SRC="smiley.gif" ALIGN="absmiddle">
  Close
</BUTTON>

...and...

Code:

<STYLE>
button.image1 {
    background-image: url(smiley.gif);
    background-repeat: no-repeat;
}
</STYLE>

...

<BUTTON TYPE="submit" CLASS="image1">
  Close
</BUTTON>

The first way for one place defined buttons, and the second one for being able to change all icons in the class. The only difference I've seen in appearance is that in the first way the image will "be pressed" when clicking the button. The second image will "standstill".

So easy...

/Sebastian.