title: How to make an image button in JSF
body: <p>I want to have a component that looks like a button, but instead of text it should contain an image. 
  Because the standard button does not offer this functionality, I tried to use a <code>&lt;h:commandLink&gt;</code>:</p>
  
  <pre><code>&lt;h:commandLink action="#{some_action}"&gt;
      &lt;p:panel styleClass="some_style"&gt;
          &lt;h:graphicImage value="#{some_image}"&gt;
      &lt;/p:panel&gt;
  &lt;/h:commandLink&gt;
  </code></pre>
  
  <p>This doesn't work. The <code>&lt;h:commandLink&gt;</code> is translated into an <code>&lt;a&gt;</code> tag, and the <code>&lt;p:panel&gt;</code> into a <code>&lt;div&gt;</code>. <code>&lt;a&gt;</code>-tags may not contain <code>&lt;div&gt;</code>-tags, so the <code>&lt;div&gt;</code>-tag is automatically placed outside the <code>&lt;a&gt;</code>-tag. 
  The result is that only the image is clickable, not the surrounding panel which is styled to look like a button. Is there a way to make the surrounding panel part of the link, or to put an image inside a button?</p>
  
  <p>My project uses JSF and the Primefaces library:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
  </code></pre>