How to replace an image in DIV dynamically on click of some other div image as shown in image.
Requirement is like that :
on click of "DIV1" root should be updated with 1.. on click of "Div2" root should be updated with 2 like that. All div having image loading from some URL and Root is a bigger div.
please reply ...
You can do something like this:
<div>
<h:graphicImage id="root" value="#{managedBean.rootImage}" alt="image"/>
</div>
<div>
<h:commandLink>
<h:graphicImage value="images/image1.png" alt="image1"/>
<f:setPropertyActionListener target="#{managedBean.rootImage}" value="images/image1.png" />
<f:ajax event="action" render="root"/>
</h:commandLink>
</div>
And in your ManagedBean create setter/getters like this:
public class ManagedBean{
public String rootImage;
public void setRootImage(String image) {
this.rootImage= image;
}
public String getRootImage() {
return rootImage;
}
}
