Jump to content

How do I add an image to this button?


Chrisj

Recommended Posts

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 by Psycho
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by requinix
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 1 year later...

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 by WebOutGateway
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.