How do I add an image to this button?

[Chrisj]

How do I add an image to this button?

<input type="button" name="search" value="Search Again" onclick="window.location.href='page.php?page=9';" style="margin:7px 0" style="padding:1px 2px 1px 2px">

[Psycho]

You don't. Buttons only support text. However, you can use an image tag to make it a input (i.e. button)

<input type="image" src="sourceOfImage.jpg" name="search" onclick="window.location.href='page.php?page=9';" style="margin:7px 0;padding:1px 2px 1px 2px">

Note: an Image input does not have a value field. The x and y coordinates the user clicked in the image are passed as the value.

Edited June 17, 2013 by Psycho

[requinix]

Or you can use the often-overlooked which does support images.

[DavidAM]

Caution: Older versions of I.E. (6.0) used to POST all BUTTON elements on the form regardless of which one was pressed. I'm not sure if they have fixed this issue in later versions, but it made it very difficult (i.e. impossible) to determine which button was used to submit the form.

 

Other than that, I like the BUTTON element.

[Chrisj]

Thanks for the replys. The Button worked, except the image has a black rectangle line border around it. How do I get rid of that?

[Chrisj]

Psycho's reply code didn't show a border, it showed the correct image, but when selected, it doesn't take me to href='page.php?page=9', it takes me to the location of another button in a line of code above it.

[requinix]

The Button worked, except the image has a black rectangle line border around it. How do I get rid of that?

CSS. Whatever you have applying to regular and submit images probably isn't applying to the button>img.

 

[edit] Maybe your CSS is removing borders on a>imgs only?

Edited June 18, 2013 by requinix

[Chrisj]

Thanks for your reply. However, I don't know what you mean by:

 

"CSS. Whatever you have applying to regular and submit images probably isn't applying to the button>img.

[edit] Maybe your CSS is removing borders on a>imgs only?

[WebOutGateway]

Hi, Chrisj!

Maybe what requinix meant was that, in your CSS, you only have the property, which removes the border of the images, inside the <a> tags (a > img). Try applying that property to the images inside the <button> tags (button > img).
 

CSS:

button > img
{
  border: none;
}

I hope this helps. Thank you.

Edited August 7, 2014 by WebOutGateway