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

V nedávno publikovaném článku jsme vám ukázali, jak pomocí JavaScriptu vytvořit systém, který bude automaticky v zadaných časových intervalech obměňovat obrázky. Někteří čtenáři ovšem namítali, že obdobnou rotaci lze v řadě případů nahradit animovaným gifem. Vaše ohlasy pak vedly ke vzniku tohoto cyklu dvou článků, ve kterém vám ukážeme, jak pouze s pomocí JavaScriptu lze vytvářet zajímavé animace.

<html>
<head>
<title>Rotace obrázků</title>
<script language="JavaScript">
<!--
doba=3500
pocet = 4
rotator=0
obrsrc = new Array(pocet)
obrsrc[0]="clanek_obrazek1.gif";
obrsrc[1]="clanek_obrazek2.gif";
obrsrc[2]="clanek_obrazek3.gif";
obrsrc[3]="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){
sample.filters.blendTrans.Apply();
sample.src = obrsrc[rotator];
sample.filters.blendTrans.Play();
}
else
{
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:blendTrans(duration=3)" >
</body>
</html>