Jiří Kosek ml.
V CW 5/97 jsme se v Tématu týdne věnovanému dynamickému HTML mohli setkat i s několika praktickými ukázkami jeho užití. Ponořme se do kódu a podívejme se ještě na několik dalších příkladů.
Plynulá změna obrázků pomocí filtrů
Následující ukázka používá filtrů k vytvoření X-střihu dvou obrázků (tzv. "prolínačka"). Prolínání obrázků je dosaženo postupnou změnou jejich transparentnosti v opačných směrech. Obrázky jsou nad sebe umístěny pomocí stylu s absolutním určením pozice.
<HTML>
<HEAD>
<TITLE>Ukázka alfa-filtru</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var id,
op = 100, // počáteční průhlednost
step = -10; // krok
function Start()
{
id = window.setInterval("Move()", 50);
}
function Stop()
{
window.clearInterval(id);
}
function Move()
{
op += step;
if (op < 0) {
op = 0;
step = -step;
};
if (op > 100) {
op = 100;
step = -step;
};
document.all.img1.filters.Alpha.opacity = op;
document.all.img2.filters.Alpha.opacity = 100-op;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<IMG ID=img1 SRC=tiger1.gif onMouseOver="Start()"
onMouseOut="Stop()"
STYLE="position: absolute; top: 10px;
left: 10px; z-index: 2;
filter: Alpha(Opacity=100)">
<IMG ID=img2 SRC=tiger2.gif
STYLE="position: absolute; top: 10px;
left: 10px; z-index: 1;
filter: Alpha(Opacity=0)">
</BODY>
</HTML>
Druhou možností, kterou při přechodu z jednoho elementu v druhý nabízejí filtry, jsou přechodové filtry. Přechodový filtr se jmenuje revealTrans a pracuje se s ním poněkud odlišně než s ostatními filtry. Filtr má 2 parametry -- typ přechodu (transition) a dobu přechodu (duration). U elementu, který chceme změnit, nejprve nastavíme typ přechodu a dobu přechodu. Poté zavoláme metodu Apply() filtru. Ta připraví vše potřebné pro provedení přechodu. Nyní pomocí vlastnosti innerText (nebo src u obrázků) přiřadíme elementu nový obsah. Přechod pak spustíme vyvoláním metody Play(). Ta spustí přechod a použije přitom zadaný typ přechodu. Internet Explorer 4.0 podporuje 23 přechodů (typy 0--22). Přechod číslo 23 je náhodný a vybere jeden z předchozích typů.
Přechod můžeme kdykoliv okamžitě ukončit pomocí metody Stop(). Pokud chceme nějakou činnost navázat na skončení přechodu, využijeme toho, že po skončení přechodu je vyvolána událost onFilterChange.
Všechny uvedené skutečnosti si demonstrujeme na malé ukázce. Vytvoříme stránku, jež bude obsahovat čítač, který bude postupně zobrazovat čísla od 20 do 0. Při změně čísla se použije vždy nový náhodně vybraný způsob přechodu.
<HTML>
<HEAD>
<TITLE>Ukázka přechodových filtrů</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=20;
function Tick()
{
i--;
if (i<0) { // ukončení odpočítávání
window.event.srcElement.onFilterChange = "";
return;
}
document.all.Counter.filters.revealTrans.transition =
Math.round(Math.random()*23); // náhodný výběr přechodu
document.all.Counter.filters.revealTrans.Apply();
document.all.Counter.innerText = i;
document.all.Counter.filters.revealTrans.Play();
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Tick()">
<DIV ALIGN=CENTER>
<DIV ID=Counter
STYLE="height: 150px; width: 200px; text-align: center;
background-color: blue; color: yellow;
font: bold 140px Arial, sans-serif;
filter: revealTrans(duration=1)"
onFilterChange="Tick()">
20
</DIV>
</DIV>
</BODY>
</HTML>
Přechody vyvolává funkce Tick(). Tu spustíme po načtení stránky a tím zároveň aktivujeme první přechod. Další přechody jsou již volány automaticky po dokončení předešlého přechodu právě nastavením obsluhy události onFilterChange na funkci Tick().
Světelné zdroje
Velice pěkné efekty lze dosáhnout použitím filtru Light. Ten umožňuje nad 1 element umístit až 10 světelných zdrojů. Zdroje světla různým způsobem nasvěcují element a určují tak, která jeho část bude viditelná.
Internet Explorer 4.0 podporuje 3 druhy zdrojů světla: rovnoměrný (Ambient), bodový (Point) a kuželový (Cone). Zdroje světla nelze definovat přímo jako parametry filtru, musí se přidat až přímo ve skriptu voláním metody addAmbient, addCone nebo addPoint. Nejjednoduší je přidání rovnoměrného zdroje světla:
addAmbient(R, G, B, intenzita)
Parametry R, G a B určují intenzitu základních složek barvy světla. Mohou nabývat hodnot od 0 do 255. Celková intenzita světelného zdroje je určena pomocí posledního celočíselného parametru.
K přidání kuželového zdroje světla potřebujeme zadat více parametrů:
addCone(x1, y1, z1, x2, x2, R, G, B, intenzita, úhel)
Souřadnice (x1, y1, z1) udávají prostorové souřadnice zdroje světla, který svítí do bodu (x2, y2, 0). úhel určuje vrcholový úhel vrhnutého kuželu světla. Ostatní parametry mají stejný význam jako u rovnoměrného zdroje světla.
Přidání bodového zdroje světla je velmi jednoduché:
addPoint(x, y, z, R, G, B, intenzita)
Po přidání světel můžeme měnit jejich polohu pomocí metody moveLight a vytvořit tak vskutku působivé efekty:
moveLight(číslo_světla, x, y, z, true)
Světla v jednom filtru jsou číslována od nuly podle pořadí, v jakém byla přidána.
Praktické použití zdrojů světla si ukážeme na malé ukázce. Vytvoříme stránku s nápisem. Nápis bude částečně viditelný (díky zdroji rovnoměrného světla) a bude přes něj jezdit kužel světla, který vždy zviditelní osvětlenou část nápisu.
<HTML>
<HEAD>
<TITLE>Dynamické HTML -- světelné zdroje</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { color: white;
background-color: black;
text-align: center }
#napis { position: relative;
width: 700px;
height: 80px;
font: bold 60px Arial;
filter: Light() }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var MinX=0,
MaxX=700,
X=0,
Y=40,
Step=10,
id;
function Move()
{
// Přesun zdroje světla
document.all.napis.filters.Light.moveLight(0, X, Y, 0, true);
// Aktualizace
X += Step;
if (X >= MaxX) {
Step = -Step;
};
if (X <= MinX) {
Step = -Step;
};
}
function Init()
{
document.all.napis.filters.Light.addCone(
(MinX+MaxX)/2, Y, 100, X, Y,
255, 255, 255, 100, 20);
// Kuželový zdroj světla
document.all.napis.filters.Light.addAmbient(
0, 0, 127, 100);
// Rovnoměrný zdroj světla
id = setInterval("Move()", 100);
// Aktivace pohybu
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Init()">
<DIV ID=napis>Computerworld</DIV>
</BODY>
</HTML>