HTML/JS: Confused about method to create an image button

Question

I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.

I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...

This is confusing, what is the proper way to implement my image button?

Thanks.

P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.

Answer 1

The proper way largely depends on what the button will do if JavaScript is not available.

If you are going to submit a form then:

<button> <img src="..." alt="..."> </button>

If you are going to go to a URL then:

<a href="..."> <img src="..." alt="..."> </a>

If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):

<button type="button"> <img src="..." alt="..."> </button>

You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.