hi,

i have two images stacked on top of each other (css: z-index). The lower one has an opacity of 0.0 at the beginning the upper one 1.0. Periodically effects should occur. First, the lower one should appear than the upper one should fade out. After that the invisible upper one should change the url. When the next period action occurs the effects should be executed the other way around. In other words this time the upper one should appear than the lower one should fade out. And so on..
Finally, the change of the images should have a smooth transition in the view of the user.

This is how I tried to realize it:

<f:view>
<a4j:form>
 <h:graphicImage id="lowerBackgroundHigh" url="#{Background.lowerCurrentBackground}" styleClass="backgroundHigh"
 style="z-index:3;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" />


 <h:graphicImage id="upperBackgroundHigh" url="#{Background.upperCurrentBackground}" styleClass="backgroundHigh"
 style="z-index:4;" />

 <rich:effect id="effectHigh" name="appearHigh" for="lowerBackgroundHigh" type="#{Background.lowerCurrentBackgroundOpacity}" />

 <rich:effect id="effectLow" name="fadeHigh" for="upperBackgroundHigh" type="#{Background.upperCurrentBackgroundOpacity}" />

 <a4j:poll interval="5000"
 oncomplete="appearHigh(),fadeHigh()"
 actionListener="#{Background.changeValues}"
 reRender="lowerBackgroundHigh, effectHigh, upperBackgroundHigh, effectLow" />
</a4j:form>
</f:view>

Background.lowerCurrentBackground & .upperCurrentBackground returns an image url. Background.lowerCurrentBackgroundOpacity & .upperCurrentBackgroundOpacity returns Appear/Fade.

Unfortunately, the rich:effect elements don't rerender after the rerender execution of a4j:poll.

I would appreciate any help..

- amoun