How to make p:graphicImage clickable and invoke bean action

Question

I am using <p:graphicImage> like below:

<div id="mapp">
    <h3>Country Map</h3>         
    <p:graphicImage id="city"
                    value="#{countryPages_Setup.countryMap}"
                    width="250"
                    height="190">

     </p:graphicImage>                
</div>

But this is not a clickable image. How can I make this image clickable so when user click on it, I can invoke the managed bean action that I want.

Straub

Do you want a kind of image map or only a single action/link? – Auxin

No it is not working , i tried <a><p:graphicImage .. /> </a>. Now what? I just want that i can click on this image. Right now it is not click-able. – Straub

Answer 1

Wrap your image in a h:commandLink / h:link:

<h:commandLink action="...">
  <p:graphicImage id="city"
            value="#{countryPages_Setup.countryMap}"
            width="250"
            height="190">
  </p:graphicImage>
</h:commandLink>

Auxin

:) Thanks. But can you tell me please why the <a> element is not working? Means <a><p:graphicImage..></a>. Thanks. – Straub

@Straub Do you have the href attribute in your anchor tag? – Auxin

no i just tried with <a> not <a href="..">. So is it the reason? – Straub

Ensure that you add the above code into a JSF form in order for it to work. – Flawy

Answer 2

If the p:graphicImage is inside a p:contentFlow, you can use the following:

For me, this works perfectly:

<h:form id="imageFlowForm">
    <p:contentFlow id="imageContent" value="#{controller.allImages}" var="entry">
        <div class="caption">#{entry.name}</div>
        <p:commandLink styleClass="content" action="#{controller.doAction}" update="detailForm">
            <p:graphicImage value="#{entry.imagePreviewUrl}" styleClass="content" width="50px" />
            <f:param name="id" value="#{entry.id}" />
        </p:commandLink>
    </p:contentFlow>
</h:form>

Polo