PraktickΘ ukßzky

Kdy₧ jsme se seznßmili se zßklady, na kter²ch dynamickΘ HTML stavφ, je pravß chvφle pro n∞kolik v∞tÜφch ukßzek jeho mo₧nostφ.

Pro ₧ivΘ prohlΘdnutφ ukßzek v prohlφ₧eΦi budete pot°ebovat prohlφ₧eΦ Internet Explorer 4.0. V ostatnφch prohlφ₧eΦφch nebude zobrazenφ mo₧nß zcela podle vaÜich p°edstav.

Zobrazovßnφ Φßstφ dokumentu na po₧adavek u₧ivatele

Tato ukßzka je pro p°edvedenφ mo₧nostφ dynamickΘho HTML p°φmo typickß. Nahraje se strßnka, kterΘ obsahuje n∞kolik zprßv, ale zobrazφ se pouze jejich nadpisy. Samotn² text zprßv bude skryt nastavenφm vlastnosti display na hodnotu none. Celß zprßva se zobrazφ a₧ po najetφ myÜφ na jeho nßzev. Navφc se nadpis zobrazenΘ zprßvy barevn∞ zv²raznφ. Podobn² mechanismus m∙₧eme pou₧φt i pro n∞kolika·rov≥ovΘ seznamy, kterΘ umo₧nφme postupn∞ rozbalovat do ni₧Üφch ·rovnφ.

<HTML>
<HEAD>
<TITLE>Aktuality z Computerworldu</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Display(elementID)
{
var id;
    
    id = "Zprava" + elementID;
    document.all.item(id).style.display = "";
    id = "Nadpis" + elementID;
    document.all.item(id).style.color = "red";
}

function Undisplay(elementID)
{
var id;
    
    id = "Zprava" + elementID;
    document.all.item(id).style.display = "none";
    id = "Nadpis" + elementID;
    document.all.item(id).style.color = "black";
}
// -->
</SCRIPT>
</HEAD>
<BODY>

<DIV ALIGN=CENTER>
<IMG SRC=cw.gif ALT="Computerworld"><BR>
MyÜφ naje∩te nad titulek zprßvy, kterou si chcete p°eΦφst.
</DIV>

<DIV onMouseOver="Display('1')" onMouseOut="Undisplay('1')">
<H1 ID=Nadpis1>Network Publishing</H1>
<DIV ID=Zprava1 STYLE="display: none">
<P>Vedoucφ p°edstavitelΘ spoleΦnosti Live Picture zaΦali hovo°it o
"network publishingu". John Sculley z Live Picture °ekl, ₧e revoluce
bude srovnatelnß s tφm, co se ve sv∞t∞ DTP d∞lo (zejmΘna pod k°φdly
MacOS) ve 2. polovin∞ 80. let. Velk² v²znam by m∞l mφt formßt FlashPix a
Internet Imaging Protocol, kter² spoleΦn∞ vyvinuly firmy Live Picture,
Eastman Kodak, Hewlett-Packard a Microsoft.
</DIV>
</DIV>

<DIV onMouseOver="Display('2')" onMouseOut="Undisplay('2')">
<H1 ID=Nadpis2>Freedom Of Choice</H1>
<DIV ID=Zprava2 STYLE="display: none">
<P>SpoleΦnost Netscape oznßmila zßm∞r zm∞nit stav, kdy podφl jejφho
browseru na trhu klesß. Po rozhodnutφ soudu o nep°φpustnosti vßzat
instalaci Windows 95 na Internet Explorer, zahajuje Netscape p°edevÜφm
na Internetu mohutnou reklamnφ kampa≥ pojmenovanou "Freedom Of Choice".
P°edstavitelΘ spoleΦnosti ·dajn∞ zva₧ujφ i mo₧nost, ₧e nap°. separovan²
Navigator by mohl b²t Üφ°en zdarma.
</DIV>
</DIV>

<DIV onMouseOver="Display('3')" onMouseOut="Undisplay('3')">
<H1 ID=Nadpis3>SQW 2.0</H1>
<DIV ID=Zprava3 STYLE="display: none">
<P>SpoleΦnost Corpus oznßmila verzi 2.0 svΘho v²vojovΘho prost°edφ SQW.
Nejv∞tÜφ zlepÜenφ oproti p°edeÜlΘ verzi by m∞lo spoΦφvat ve zv²Üenφ
rychlosti provozu dynamicky generovan²ch databßzov²ch aplikacφ.
</DIV>
</DIV>

</BODY>
</HTML>

VÜimn∞me si, ₧e jednotlivΘ zprßvy jsou obsa₧eny v elementu DIV, aby pro n∞ Ülo nastavit spoleΦnΘ reagovßnφ na udßlosti. Na ukßzce je rovn∞₧ vid∞t, jakΘ ·spory p°inßÜφ pou₧φvßnφ funkcφ a jejich parametrizovßnφ.

Definovali jsme dv∞ funkce -- Display() a Undisplay(). Ob∞ jako parametr oΦekßvajφ Φφslo zprßvy. Display() zobrazφ obsah zprßvy a zv²raznφ jejφ nadpis. Nadpisy musφ mφt rovn∞₧ p°i°azeny sprßvnΘ ID. Undisplay() se volß po opuÜt∞nφ elementu myÜφ a text zprßvy schovß a barvu nadpisu nastavφ zp∞t na Φernou.

P°i vytvß°enφ dynamick²ch strßnek bychom m∞li mφt na pam∞ti, ₧e ne vÜichni pou₧φvajφ k prohlφ₧enφ naÜφ strßnky nejnov∞jÜφ v²st°elky browserovΘ technologie. Strßnku s dynamick²m HTML navrhujeme tak, aby se korektn∞ zobrazila i v prohlφ₧eΦφch bez podpory dynamickΘho HTML. Nenφ to nic t∞₧kΘho. NaÜe ukßzkovß strßnka tyto vlastnosti spl≥uje.

Zv²razn∞nφ odkaz∙ po p°ejetφ myÜφ

Pokud chceme upoutat pozornost u₧ivatele na naÜe odkazy, m∙₧eme pou₧φt mal² trik. Vytvo°φme takovou strßnku, kde se barva odkazu zm∞nφ z modrΘ na Φervenou v₧dy, kdy₧ bude myÜ nad odkazem.

Abychom nemuseli p°ed∞lßvat cel² dokument a u ka₧dΘho odkazu psßt obsluhu udßlosti, vyu₧ijeme dalÜφ zajφmav² objekt z objektovΘ hierarchie. Objekt window.event.srcElement odpovφdß elementu, ke kterΘmu se vß₧e aktußln∞ zpracovßvanß udßlost.

Udßlosti vyvolßvajφcφ zv²razn∞nφ odkaz∙ nastavφme pro cel² dokument u elementu BODY. V obsluze udßlosti si pak zkontrolujeme, zda element, nad kter²m je myÜ, je odkaz (A). Pokud ano, odkaz zv²raznφme, p°φpadn∞ mu vrßtφme p∙vodnφ barvu. V dokumentu pak m∙₧eme mφt odkaz∙ kolik chceme, barevn∞ zv²raz≥ovat se budou vÜechny.

<HTML>
<HEAD>
<TITLE>Strßnka s aktivnφmi odkazy</TITLE>
<STYLE TYPE="text/css">
<!-- 
    :link { color: blue } 
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function HighlightAnchor()
{
    if (window.event.srcElement.tagName == "A") 
        window.event.srcElement.style.color = "red";
}

function LowlightAnchor()
{
    if (window.event.srcElement.tagName == "A") 
        window.event.srcElement.style.color = "blue";
}
// -->
</SCRIPT>
</HEAD>
<BODY onMouseOver="HighlightAnchor()"
      onMouseOut="LowlightAnchor()">
    zde m∙₧e b²t zcela libovoln² dokument
</BODY>
</HTML>

Animace na strßnce

Abychom na strßnku mohli umφstit n∞jakou animaci -- tj. element, kter² se pohybuje -- musφme v pravideln²ch intervalech m∞nit jeho pozici. V tom nßm v²born∞ pom∙₧e metoda window.setInterval("funkce", ms). Funkce zadanß prvnφm parametrem se vyvolß ka₧d²ch ms milisekund.

My vytvo°φme strßnku, na kterΘ se bude od okraj∙ obrazovky odrß₧et obrßzek zem∞koule. O pohyb obrßzku zem∞koule a jeho odrß₧enφ od okraj∙ se starß funkce Move(), kterß je volanß v pravideln²ch intervalech. Funkce skriptu by m∞la b²t z°ejmß z komentß°∙:

<HTML>
<HEAD><TITLE>DynamickΘ HTML -- odrß₧ejφcφ se logo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var id,             // pomocnß prom∞nnß pro ΦasovaΦ
    stepX, stepY;	// krok v X a Y-sm∞ru

function Start()	// spuÜt∞nφ pohybu
{
    // umφst∞nφ obrßzku doprost°ed obrazovky
    document.all.Logo.style.pixelLeft =  
        document.body.offsetWidth / 2;	
    document.all.Logo.style.pixelTop = 
        document.body.offsetHeight / 2;
        
    // obrßzek ud∞lßme viditeln²
    document.all.Logo.style.visibility = "visible"; 

    // nßhodnß inicializace sm∞ru a rychlosti pohybu	
    stepX = (Math.random()+5) * 2 - 5;	
    stepY = (Math.random()+5) * 2 - 5;	

    // nastavenφ ΦasovaΦe
    id = window.setInterval("Move()",50);	
}

function Stop()		// ukonΦenφ pohybu
{
    // vypnutφ ΦasovaΦe	
    window.clearInterval(id);
    
    // "schovßnφ obrßzku"
    document.all.Logo.style.visibility = "hidden";
}

function Move()		// posun loga
{
    // posunutφ obrßzku	
    document.all.Logo.style.pixelLeft += stepX;
    document.all.Logo.style.pixelTop += stepY;
    
    // odra₧enφ od levΘho okraje
    if (document.all.Logo.style.pixelLeft <= 0) stepX = -stepX;
    
    // odra₧enφ od pravΘho okraje
    if ( document.all.Logo.style.pixelLeft >= 
         (document.body.offsetWidth - document.all.Logo.width 
          - stepX - 22) ) stepX = -stepX; 
                 // 22 je magickΘ Φφslo Üφ°ky scroll-baru
          
    // odra₧enφ od hornφho okraje      
    if (document.all.Logo.style.pixelTop <= 0) stepY = -stepY;
    
    // odra₧enφ od dolnφho okraje
    if ( document.all.Logo.style.pixelTop >= 
         (document.body.offsetHeight - document.all.Logo.height
          - stepY) ) stepY = -stepY;
}
// -->
</SCRIPT>
</HEAD>
<BODY onload="Start()">
<IMG ID="Logo" 
     STYLE="visibility: hidden; position: absolute; z-index:-1"
     SRC="earth.gif" onClick="Stop()">
<H1>A p°ece se toΦφ...</H1>
Animaci m∙₧ete zastavit kliknutφm na naÜi milou planetu.
</BODY>
</HTML>

U obrßzku jsme vlastnost z-index nastavili na -1, aby se obrßzek pohyboval pod textem strßnky.

Pokud si d∙kladn∞ prohlΘdnete v²sledek, zjistφte, ₧e se navφc Zem∞ otßΦφ okolo svΘ osy. Nepou₧ili jsme toti₧ obyΦejn² obrßzek, ale animovan² GIF, kter² se postarß o rotaci naÜφ milΘ planety.

Strßnky, kterΘ jsou moc ₧ivΘ, mohou n∞kter²m u₧ivatel∙m vadit, proto₧e je ruÜφ p°i Φtenφ. M∞li bychom proto pou₧φvat krßtkΘ animace nebo nabφzet viditeln² zp∙sob, jak animace ukonΦit.

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ß dva 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. IE 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, kterß 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 jeden element umφstit a₧ deset sv∞teln²ch zdroj∙. Zdroje sv∞tla r∙zn²m zp∙sobem nasv∞cujφ element a urΦujφ tak, kterß jeho Φßst bude viditelnß.

IE 4.0 podporuje t°i 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>

┌vod | KaskßdovΘ styly | JavaScript | P°ehled vlastnostφ styl∙ | DHTML vs. Java

© Copyright 1998 Ji°φ Kosek, All Rights Reserved.
Strßnka obsahuje pln² text Φlßnku otiÜt∞nΘho v t²denφku Computerworld dne 30. ledna 1998 (CW5/98).
Strßnku p°ipravil Ji°φ Kosek, xkosj06@vse.cz
Poslednφ modifikace: 24-01-98