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.
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.
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>
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.
<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().
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