Version 5
    
    <script type="text/javascript">
                first=true;
                function loopIt()
                {
                    if( first )
                    {
                        Appear1();
                        Fade2();
        
                        first = false;
                    }
                    else
                    {
                        Fade1();
                        Appear2();
    
                        first = true;
                    }
                }
            </script>
    
            <style type="text/css">
                .backgroundHigh { position: absolute; }
            </style>
    
            <a4j:region>
                <h:form>
                    <a4j:poll id="poll1" interval="5000" enabled="true" oncomplete="loopIt();"></a4j:poll>
                </h:form>
            </a4j:region>
    
            <h:form>
                <h:outputLink value="http://www.google.com">
                    <h:graphicImage id="bgHigh_1" url="http://www.google.com/intl/en_ALL/images/logo.gif" styleClass="backgroundHigh" style="z-index:3;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" ></h:graphicImage>
                </h:outputLink>
    
                <h:outputLink value="http://www.yahoo.com">
                    <h:graphicImage id="bgHigh_2" url="http://www.pcarena.org/images/upload/yahoo.jpg" styleClass="backgroundHigh" style="z-index:4"></h:graphicImage>
                </h:outputLink>
    
            </h:form>
    
            <rich:effect name="Appear1" for="bgHigh_1" type="Appear" ></rich:effect>
            <rich:effect name="Fade2" for="bgHigh_2" type="Fade" ></rich:effect>
    
            <rich:effect name="Fade1" for="bgHigh_1" type="Fade" ></rich:effect>
            <rich:effect name="Appear2" for="bgHigh_2" type="Appear" ></rich:effect>