Quick View with links and a richModalPanel

[samuraicoder]

Hi, I am new to Java, to Faces, to RichFaces.

I quickly was able to get a working 'Quick View' Popup window based on a link on the page and another link on the modal popup.

What I want to try next is to hover over an image and have a Button appear over the center of the image.

I have been trying but I am not sure what to use. Can someone point me in the correct direction?


BTW: My Modal Popup:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 template="layout/template.xhtml">
 <ui:define name="body">
 <h:messages globalOnly="true" styleClass="message" />
 <rich:panel>
 <f:facet name="header">Quick View</f:facet>
 <s:div style="width:120px;padding:6px;">MR. COFFEE® 2.3oz Coffee
 Grinder - Chrome</s:div>
 <h:graphicImage value="/img/p33579.jpg" />

 <h:form>
 <a onclick="Richfaces.showModalPanel('panel1');" href="#">Quick
 View Product</a>
 </h:form>

 </rich:panel>

 <rich:modalPanel id="panel1" width="550" height="350" left="100"
 top="50">
 <f:facet name="header">Product Quick View</f:facet>
 <h:graphicImage value="/img/p33579b.jpg" />
 <s:div>MR. COFFEE® 2.3oz Coffee Grinder - Chrome</s:div>
 <h:form>
 <a onclick="Richfaces.hideModalPanel('panel1');" href="#">Close</a>
 </h:form>
 </rich:modalPanel>

 </ui:define>
</ui:composition>

[ilya_shaikovsky]

What I want to try next is to hover over an image and have a Button appear over the center of the image.

sorry, but seems not get your point

[samuraicoder]

How would you have a button appear on the center of an image when you mouse-over?

Using RichFaces?

[ilya_shaikovsky]

seems just pure html, JavaScript, css related question.

[samuraicoder]

Yes we currently do it with Javascript and CSS. As we do the whole 'Quick View' in Javascript CSS.

rich:contextMenu I looked at but it seems like too much for a single button floating over an image.

So the only answer is to use regular CSS/Javascript in the midst of using RichFaces? for a hover over button?


Thanks a lot for your time.

[ilya_shaikovsky]

you could also use tooltip.