N∞kolik ukßzek z dynamickΘho HTML
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>
