image button with html5

Question

I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:

<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />

the image is displayed, but the input type doesn't show the image. what do i do wrong ?

Answer 1

<input type="image" src="img/beer.png" /> is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.

<input type="image" src="img/beer.png" onsubmit="submit();" />

But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:

<button type="submit" name="beer" value="beer_btn_was_clicked">
  Here's some optional text,
  <p>which you can even put in a paragraph!</p>

  And you don't even need JavaScript!

  <img src="img/beer.png" />
</button>

---

Edit (2016-02-12)

As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.

According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).

A few other elements belong to this category, but only if a specific condition is fulfilled:

• <a>, if it contains only phrasing content
• <area>, if it is a descendant of a element
• <del>, if it contains only phrasing content
• <ins>, if it contains only phrasing content
• <link>, if the itemprop attribute is present
• <map>, if it contains only phrasing content
• <meta>, if the itemprop attribute is present

_{*today was that I read about it, not when the change was introduced}

Answer 2

http://jsfiddle.net/cyB7B/

This works for me...have you got any other code that could be interfering? CSS maybe?