如何使 p:graphicImage 可点击并调用 bean 操作

Posted 2023-04-13

【中文标题】如何使 p:graphicImage 可点击并调用 bean 操作

【英文标题】：How to make p:graphicImage clickable and invoke bean action

【发布时间】：2012-04-13 01:18:03

【问题描述】：

我正在使用<p:graphicImage>，如下所示：

<div id="mapp">
    <h3>Country Map</h3>         
    <p:graphicImage id="city"
                    value="#countryPages_Setup.countryMap"
                    
                    >

     </p:graphicImage>                
</div>

但这不是可点击的图片。如何使此图像可点击，以便当用户单击它时，我可以调用我想要的托管 bean 操作。

【问题讨论】：

你想要一种图像映射还是只有一个动作/链接？

不，它不起作用，我试过 。怎么办？我只是希望我可以点击这张图片。现在它是不可点击的。

【参考方案1】：

用h:commandLink / h:link 包裹你的图片：

<h:commandLink action="...">
  <p:graphicImage id="city"
            value="#countryPages_Setup.countryMap"
            
            >
  </p:graphicImage>
</h:commandLink>

【讨论】：

:) 谢谢。但是你能告诉我为什么 元素不起作用吗？表示 。谢谢。

@Basit 你的锚标签中有href 属性吗？

不，我只是尝试使用 而不是 。是这个原因吗？

确保将上述代码添加到 JSF 表单中以使其正常工作。

【参考方案2】：

如果 p:graphicImage 在 p:contentFlow 中，您可以使用以下内容：

对我来说，这非常有效：

<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"  />
            <f:param name="id" value="#entry.id" />
        </p:commandLink>
    </p:contentFlow>
</h:form>