<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>