Zdrojový kód ke článku: JavaScriptové bannery 2.

V našem pokračování seriálu o animacích vytvořených pomocí Javascriptu a DHTML si představíme filtr revealTrans(), který umožňuje přes 20 různých efektů, kterými můžeme obohatit jednoduché obměňování obrázků (např. při rotaci bannerů). Dále si ukážeme, jak při animaci průběžně měnit jednotlivé filtry.

<% opendb() %>
<% ces="/data" CALL bannery("20","19") %>
<% ces="/data" CALL bannery("2","1")%>

<html>
<head>
<title>Rotace obrazků</title>
<script language="JavaScript">
<!--
doba=3500
pocet = 4
rotator=0
transtyp=0
obrsrc = new Array(pocet)
obrsrc[0]="clanek_obrazek1.gif";
obrsrc[1]="images/clanek_obrazek2.gif";
obrsrc[2]="images/clanek_obrazek3.gif";
obrsrc[3]="images/clanek_obrazek4.gif";
obr = new Array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new Image();
obr[i].src= obrsrc[i]
}

function rotate(obr) {
if (rotator==pocet) {rotator=0;}
if (window.document.sample){
//animace pro MSIE
if( transtyp>23){transtyp=0};
sample.filters.revealTrans.transition=transtyp;
sample.filters.revealTrans.Apply();
sample.src = obrsrc[rotator];
sample.filters.revealTrans.Play();
transtyp=transtyp + 1
}
else {
// náhradní řešení pro NN
document.images["obraz"].src = obrsrc[rotator];
}
rotator = rotator + 1
window.setTimeout('rotate();',doba);
}

//--></script>
</head>
<body onLoad="rotate('obraz');">
<img name="obraz" ID='sample' src="clanek_obrazek1.gif" border="0" width="150" height="113" style="filter:revealTrans(duration=3)">
</body>
</html>