image button in php

Question

I am trying to use image for button as:

<button name="foo" type="button" value="bar" onclick="AjaxResponse()" > <img src="img.png"> </button>

or

 <button name="foo" type="button" value="bar" onclick="AjaxResponse()" img src="img.png" />

Both does not show button with image. It just shows small icon, which performs correct operation on click. But why the image could not be seen?

Use input type image http://www.w3schools.com/tags/att_input_src.asp. And both your html codes are incorrect. — machineaddict, Aug 13 '13 at 06:15
Karimkhan, Did u tried this? http://stackoverflow.com/questions/2738920/background-image-for-input-type-button — Mohan Raj, Aug 13 '13 at 06:32

Georg · Answer 1 · 2013-08-13T13:06:10.017

3

Just use the <img> tag and add onClick to it:

<img src="img.png" onclick="AjaxResponse()" />

In addition, you can set the width and height according to your picture's dimensions:

<img src="img.png" onclick="AjaxResponse()" width="100" height="100" />

However, the CSS background-image property is probably the best solution. There you can also adjust width and height.

edited Aug 13 '13 at 13:06

answered Aug 13 '13 at 06:18

Georg

the img element doesn't have a closing tag :-( – Aug 13 '13 at 06:25
@jeff I normally use ´XHTML´, where all tags have to be closed, but I edited the answer. – Georg Aug 13 '13 at 06:45
This correct syntax is XHTML has been depreciated and hasn't been updated since 1999. Use html 5 syntax. – Aug 13 '13 at 06:57

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

Specify the width and height correctly.Like

<img src="something" width=200 height=200>

Otherwise use div tag to create custom button with the help of CSS.

Go through this you can get some idea Click here

edited May 23 '17 at 12:08

Community

answered Aug 13 '13 at 06:19

nmkyuppie

score 1 · Answer 3 · answered Aug 13 '13 at 06:15

1

There is no need of PHP, this is in your HTML part and you can't do this without CSS or you can use:

<input type="image" ...

to know more read the following link: Input Types

OR take a look on CSS: background

answered Aug 13 '13 at 06:15

jogesh_pi

score 1 · Answer 4 · answered Aug 13 '13 at 06:19

1

<input type="image" src="FILEPATH" onclick="AjaxResponse()" name="foo" id="button" value="bar">

answered Aug 13 '13 at 06:19

KevBot

score 1 · Answer 5 · edited Aug 13 '13 at 06:39

1

if you don't want to use css, you can use the input like this,

input type="image" src="img.png" name="foo" type="button" alt="bar" onclick="AjaxResponse()"

edited Aug 13 '13 at 06:39

Kishan_KP

answered Aug 13 '13 at 06:19

Ashish C Bhatt

5 Answers5