KURS

DHTML

Wstęp

Ten wstęp będzie krótką informacją na temat możliwości Dynamicznego HTML-a. Daje on dużo więcej możliwości niż sam język JavaScript. Jednocześnie ma z nim bardzo dużo wspólnego.

Termin Dynamiczny HTML (DHTML) jest stosunkowo nowy. Możliwości, które są zwane DHTML-em powstawały wraz z nowymi wersjami przeglądarek. Jest on rozbudowaniem JavaScriptu o nowe możliwości i techniki połączonym z arkuszami stylów i nowymi możliwościami przeglądarek.

Nowa wersja języka skryptowego pozwala dynamicznie zmieniać zawartości części strony WWW, daje dostęp do nowych możliwości, niedostępnych w starych wersjach tego języka. Strona nie musi być już statyczna. Ruch na stronach WWW to przede wszystkim animowane banery oraz jeszcze rzadki Flash. JavaScript daje bardzo szerokie możliwości dodawania do niej ruchomych elementów, zmieniania ich pozycji, ukrywania, i pokazywania ich. Nowe możliwości to np. kontrolowanie rozdzielczości ekranu. Mając tak cenną informację, można dostosować szerokość tabelki, rozmiar czcionki, odstępy itd.

Bardzo często stosowanym wykorzystaniem nowych możliwości są warstwy, zwane także blokami. Mają bardzo szerokie zastosowanie, chociaż nie są jeszcze tak często wykorzystywane. Pozwalają nanieść na stronę normalne elementy stron WWW, z dokładnym określeniem ich położenia. Elementy warstwy mogą znaleźć się nad innym tekstem lub grafiką. Wygląda to, jakby jedna strona była naniesiona na już istniejącą. Warstwa może być w każdej chwili ukryta lub zamieniona na inną, zawierającą inne elementy strony WWW. Sposób jej pokazywania, poruszania się, ukrywania, miejsce położenia można także zmieniać.

Warstwa może być również ruchoma - w postaci rozwijanego menu. Takie rozwiązanie daje możliwość nawigacji całego serwisu w bardzo wygodny sposób, niczym normalny program exe. Jeżeli menu przeszkadza, to można je myszką przesunąć w inne miejsce - metodą przenieś i upuść. Można go rozwinąć, by dostać się głębiej w serwis. Zaletą jest jego bardzo mała powierzchnia, nie większa niż standartowego menu programowego. Wprawdzie stworzenie profesjonalnego menu zajmie wiele pamięci, ale umieszczając go w dowolnym zewnętrznym pliku, jak style, pozwala udostępnić menu z każdej strony, bez ponownego ładowania. A strona zyskuje dodatkowe miejsce, na inne ważniejsze rzeczy.

Przy pomocy JavaScript powstają (jeszcze nieliczne), ale bardzo ciekawe banery. Po najechaniu myszką jego elementy podążają za kursorem, mimo, że przycisk myszki jest cały czas zwolniony. To przykład kolejnej możliwości DHTML-u - kontrolowanie pozycji kursora. Alternatywnym rozwiązaniem jest możliwość przesuwania pewnych elementów banera metodą przenieś i upuść. Jeżeli wszystko jest zrobione estetycznie z elementami grafiki, to daje dobre wrażenie tradycyjnego baneru z wyjątkowymi właściwościami, a tym samym atrakcyjność reklamy wzrasta.

Rozwiązania DHTML-a mogą być imponujące, w zależności od inicjatywy i pomysłu. Trzeba jednak założyć, że niektóre z nich będą dostępne tylko w najnowszych wersjach przeglądarek. Spora część internautów używa mimo wszystko nowych przeglądarek, czyli tych, które radzą sobie z większością skryptów. Dobrze przygotowany serwis wykorzystujący możliwości JavaScriptu może mieć więcej wspólnego z prezentacją multimedialną, niż ze stroną WWW. A możliwości języka wzrastają z każdą nową wersją przeglądarki.

Definiowanie warstw

Każdej warstwie, podobnie jak wielu elementom stron WWW, można przypisać pewne własności, które potem można modyfikować, w zależności od potrzeb. Właściwości te definiuje się w bloku stylów:

<STYLE TYPE="text/css">
#nawza_warstwy {właściwość1; właściwość2}
</STYLE>

Nazwa bloku poprzedzona jest zawsze znakiem #. Dostępnych jest kilka właściwości dla każdej warstwy:

• POSITION: określa pozycje warstwy. Może przyjąć dwie wartości: Absolute - określana jest względem górnego lewego rogu okna (jak ta na tej stronie); Relative - określana względem poprzedniego elementu strony WWW.

• VISIBILITY: określa, czy warstwa ma być widoczna. Visible - warstwa będzie widoczna, Hidden - będzie całkowicie ukryta.

• BACKGROUND-COLOR oraz LAYER-BACKGROUND-COLOR: definiuje kolor warstwy, jest takim samym odpowiednikiem jak BGCOLOR określanym w <BODY> dla strony. Pierwsza cecha jest tylko dla IE, druga tylko dla NN, dlatego by osiągnąć zamierzony efekt, należy używać obu równocześnie.

• WIDTH: określa długość.

• HEIGHT: określa wysokość.

• LEFT: określa odległość warstwy od lewego marginesu okna.

• TOP: określa odległość warstwy od górnego marginesu okna.

• CLIP: pozwala określić, jaka część warstwy ma być widoczna (dostępne tylko przy absolutnej pozycji). Używa się do tego celu prostokąta Rect(0,200,100,0). Wartości określają kolejne wielkości względem wszystkich marginesów (rozmiarów) warstwy: górny, prawy, dolny, lewy.

• Z-INDEX: określa, która warstwa znajduję się najwyżej. Ta z największym indeksem jest na górze. Jest pomocne, gdy wszystkie warstwy są widoczne i zachodzą na siebie.

Wszystkie odległości są wielkościami w pikselach. Kolejne wartości w stylach należy rozdzielać średnikiem, a wartość właściwości jest poprzedzona dwukropkiem. Wielkości warstw określane przez WIDTH oraz HEIGHT mogą być źle odczytywane przez NN, jeżeli element bloku będzie większy, niż rozmiar warstwy. Ale także odwrotnie, jeżeli element nie będzie duży (mały gif), a rozmiar warstwy wielki, to wielkość bloku także się zmieni. Mówiąc ściślej w NN wielkości dostosowują się do rozmiarów umieszczonych w niej elementów. W takim przypadku warto umieścić wszystkie elementy w tabeli. Ponadto każda warstwa może zawierać formatowania wielkości czcionek i kolorów itd. Przykładowa definicja może wyglądać tak:

<STYLE TYPE="text/css">
#Show {POSITION:Absolute; VISIBILITY: Visible; WIDTH:200; HEIGHT:100; LEFT:100; TOP:5}
</STYLE>

Po określeniu właściwości warstwy należy jeszcze sporządzić jej zawartość i wkleić ją do dokumentu.:

<DIV ID="Show">
 element strony WWW
 element strony WWW
 element strony WWW
</DIV>

Blokiem jest tag <DIV>, zawsze z parametrem ID, który przyporządkowuje tej warstwie właściwości. Elementy strony WWW, to po prostu dowolne elementy strony: rysunki, tekst, formularze itd. Koniec elementów warstwy kończy się z zamknięciem bloku DIV

Stosowanie stylów pozwala na wielokrotne wykorzystanie jednej właściwości do kilku warstw. Jest to dobre, kiedy kilka warstw musi być umieszczonych jedna nad drugą. Wadą jest jednak niemożliwość odwołania się do konkretnej warstwy. Jeżeli bloki zostaną zadeklarowane przez jedną nazwę, to modyfikacja nie będzie działała prawidłowo, bo nazwy będą się dublowały. Dlatego takie wykorzystanie nie ma właściwie sensu, chyba, że bloki będą przezroczyste. W przypadku, gdy istnieje tylko jedna warstwa, zamiast ID można umieścić style już w bloku (ale modyfikacja właściwości takiej warstwy jest niemożliwa, bo nie posiada ona parametru ID):

<DIV STYLE="POSITION:Absolute; VISIBILITY: Visible; LEFT:100; TOP:5">
 elementy strony WWW
</DIV>

Nie tracąc możliwości zmieniania parametrów wartst można wprowadzić klasy i całe formatowanie uprościć. Jest to użyteczne, gdy kilka warstw posiada te same właściwości: kolor, czcionkę, położenie itd. Wprowadzamy w stylach klasę:

.klasa1 {POSITION:Absolute; VISIBILITY:Visible; WIDTH:200; HEIGHT:100; FONT-SIZE:Blue}

Jeżeli wszystkie elementy są identyczne, to warto je wsprowadizć do klasy. Jeżeli nie są, to trzeba zbudować normalną warstwę typu #Blok {...} w stylach. Obejmi ona pozostałe parametry, którymi róznią się bloki. Deklaracja bloku wygląda wtedy inaczej:

<DIV CLASS="klasa1" ID="Show">

Jeżeli warstwa nie będzie miała przypisanego koloru (będzie przezroczysta), to nie oznacza to, że inne elementy umieszczone pod nią będą mogły być aktywne. Linka umieszczona pod blokiem nie może być kliknięta, mimo, że jest widoczna. Podobnie rzecz ma się z przyciskami. Spróbuj przesunąć warstwę nad menu i kliknąć jedną z pozycji, która znajduje się pod blokiem. Jednak, jeżeli wielkość warstwy będzie ograniczona przez CLIP, wtedy warstwa będzie tak wielka, jak określa ta właściwość, nie zaś jak WIDTH, czy HEIGHT

Przesuwanie warstw

Podstawowym narzędziem do obsługiwania warstw jest nadawanie im ruchu. Jednak dany blok musi mieć absolutną wartość położenia. Odbywa się to w różny sposób, w zależności od tego, czy strona jest otwarta przez Navigatora, czy Explorera. W związku z tym należy określić typ przeglądarki. Służy do tego prosta instrukcja :

nn4= (document.layers) ? true : false;
ie4= (document.all) ? true : false;

Uwaga: powyższa deklaracja jest przykładem, ale będzie wykorzystywana domyślnie także w dalszych tematach, gdzie będzie konieczna do sprawdzenia przeglądarki. Zmienne ie4 oraz nn4 będą także pojawiały się dalej.

W Navigatorze obiektem, który daje możliwość modyfikowania zmian w bloku jest document.layers. W Exploratorze jest to document.all.style. Odwołanie się do przykładowego położenia top warstwy o nazwie Blok wygląda następująco:

if(nn4) document.layers["Blok"].top=120;
if(ie4) document.all["Blok"].style.top=120;

W obydwu przypadkach odwołanie następuje przez obiekt document. Następnie, w zależności od przeglądarki jest obiekt layers lub all i nazwa warstwy. Ponadto w Exploratorze jest jeszcze konieczne dodanie style. W końcu konkretna właściwość, którą trzeba zmienić. Po takim zabiegu warstwa zostanie przesunięta na odległość 120 pikseli od początku strony. Modyfikując ostatni moduł można zmieniać różne właściwości bloku (o czym także dalej).

Przykładowa funkcja (pobiera dwa argumenty - współrzędne warstwy), która będzie obsługiwała położenie bloku Blok, wygląda następująco.

function Pozycja(T,L) {
if (nn4) {
 document.layers["Blok"].left=L;
 document.layers["Blok"].top=T;
 }
else if (ie4) {
 document.all["Blok"].style.left=L;
 document.all["Blok"].style.top=T;
 }

Do odczytywania bloku służą te same instrukcje w Navigatorze i podobne w Exlporatorze. Wygląda to następująco:

if(nn4) {
 Left = document.layers["Blok"].left; - lewa krawędź
Top = document.layers["Blok"].top}; - górna krawędź

if(ie4) {
 Left = document.all["Blok"].offsetLeft;
 Top = document.all["Blok"].offsetTop};

Powyższa możliwość danje najlepsze efekty przy odczytywaniu pozycji bloku w Exploratorze, ale nie jest jedyną możliwością. Jej zaletą jest bezproblemowa możliwość odczytania pozycji. Dwie poniższe funkcja także działają, ale dopiero wtedy, gdy pozycja danej warstwy zostanie zmodyfikowana przez skrypt. Gdy pozycja zostanie sprawdzona jeszcze przed jakąkolwiek modyfikacją, to pierwsza para pokaże wartości puste, druga 0

document.all["Blok"].style.top - podawane w px
document.all["Blok"].style.left

document.all["Blok"].style.pixelTop
document.all["Blok"].style.pixelLeft

Istnieje także możliwość sprawdzenia aktualnych wymiarów warstwy:

if (nn4) {
 Wys=document.layers["Blok"].document.height;
 Szer=document.layers["Blok"].document.width;
}
if (ie4) {
 Wys=document.all["Blok"].scrollHeight;
 Szer=document.all["Blok"].scrollWidth;
} 

Aby uprościć wprowadzanie zmian, można zbudować nowy obiekt, który będzie zależny od przeglądarki. Po jego stworzeniu można będzie niezależnie od przeglądarki i założeń wprowadzać zmiany. Instrukcja uniwersalna:

if (nn4) {
 Przed="document.layers";
 Za="";
}
else if (ie4){
 Przed="document.all";
 Za=".style";
 }

Taka deklaracja pozwoli używać zmiennych Przed oraz Za niezależnie od przeglądarki. Bezpośrednie użycie musi się odbyć z użyciem funkcji eval:

eval(Przed + "['Blok']" + Za + ".top=120");

Ukrywanie warstw

Drugim, bardzo ważnym narzędziem jest możliwość pokazywania i ukrywania warstw. Dobrym tego wykorzystaniem jest stworzenie galerii grafiki. Wszystkie obrazki znajdują się w tym samym miejscu i są kolejno odsłaniane.

Na początek trzeba zdefiniować tyle warstw ile będzie obrazków w galerii. W przypadku, gdy takich obrazków będzie bardzo dużo, warto zadeklarować warstwy przy pomocy pętli for. Za jej pomocą można w kilku linijkach stworzyć kilkaset warstw, a plik nie będzie dużo więcej cięższy, niż gdyby było tam tylko kilka warstw.

Pierwsza warstwa winna być widoczna. Pozostałe muszą być ukryte, by nie było problemów z tym, który obrazek jest aktualnie widoczny. Deklaracja czterech warstw przy pomocy pętli w JavaScript może wyglądać tak:

document.write('<STYLE TYPE="text/css">')
document.write("#img1 {POSITION:Absolute; VISIBILITY:Visible; LEFT:50; TOP:500; WIDTH:50; HEIGHT:50}")
for (i=2; i<=4; i++)
document.write("#img"+i+" {POSITION:Absolute; VISIBILITY:Hidden; LEFT:50; TOP:500; WIDTH:50; HEIGHT:50}")
document.write("</STYLE>");

Takie rozwiązanie daje się łatwo modyfikować. Nie ma żadnego problemu ze zwiększaniem rozmiaru 200 warstw. Wymiary wszystkich warstw muszą być takie same, by wyglądało, jakby jeden obrazek pojawiał się zamiast drugiego. Konieczna jest pozycja Absolute, z tego samego powodu, dla jakiego wymiary muszą być identyczne.

Stworzenie zawartości warstw w <BODY> także jest bardzo krótkie, bo należy stworzyć tylko jeden obrazek w każdym z bloków:

<DIV ID="img1"><IMG SRC="graph/obrazek1.gif" WIDTH=40 HEIGHT=40></DIV>

Tutaj podobnie, jak ma to miejsce w stylach, w przypadku wielu bloków, można zastosować pętlę for. Jest to już mniej wygodne, jeżeli nazwy plików są różne. Można wprowadzić tablicę z nazwami plików lub nazwać pliki kolejnymi liczbami.

Funkcje pokazujące i ukrywające mogą być zbudowane w bardzo różny sposób. W moim przypadku na początku następuje ukrycie widocznej warstwy, w skutek czego żaden blok nie jest widoczny. Następnie nowa warstwa zostaje odsłonięta. Przy modyfikacji Navigator i Explorer formalnie używają innych wartości. Jednak można używać wartości Explorera (czyli hidden i visible), bo Navigator je akceptuje.

Nr=1;
function View(Dir) {
if (nn4) document.layers["img"+Nr].visibility="hide";
if (ie4) document.all["img"+Nr].style.visibility="hidden";

if (Dir)
 if (Nr<4) Nr++; else Nr=1;
else
 if (Nr>1) Nr--; else Nr=4;

if (nn4) document.layers["img"+Nr].visibility="show";
if (ie4) document.all["img"+Nr].style.visibility="visible";
}

Funkcja pobiera argument logiczny. Jest potrzebny, by określić, czy ma być odsłonięta warstwa poprzednia, czy następna. Pierwszym blokiem, który jest widoczny jest pierwszy (zgodnie ze stylami).

Pozostaje jeszcze zbudować krótką nawigację dla galerii. Do tego celu można użyć nowej warstwy. Blok taki powinien różnić się przede wszystkim położeniem, by linki do nawigacji były zawsze widoczne. Linka Następny wywoła funkcję w argumentem true, co spowoduj odsłonięcie kolejnego obrazka:

<DIV STYLE="POSITION:Absolute; VISIBILITY: Visible; LEFT:15; TOP:550; WIDTH:150; HEIGHT:20">
<A HREF="javascript:View(false)">Poprzedni</A> || <A HREF="javascript:View(true)">Następny</A>
</DIV>

 

Sterowanie widocznością warstw może się także pośrednio odbywać poprzez modyfikowanie właściwości Z-INDEX. Służy do tego zIndex:

if(nn4) document.layers[ident].zIndex=2;
if(ie4) document.all[ident].style.zIndex=5;

Odsłanianie części warstw

Warstwy można ukrywać i pokazywać, można też wskazać część bloku, który ma być widoczny. Służy do tego instrukcja clip . Funkcję clip można modyfikować dynamicznie, co pozwala uzyskać ciekawe efekty np. przewijanego tekstu. Można go też uzyskać przesuwając warstwę i zasłaniając pozostałą część innym blokiem. Jest to często niewygodne, bo warstwa ukrywająca nie może być przezroczysta, ponadto swą powierzchnią zajmuje wiele miejsca.

W Navigatorze każdą krawędź, poza która dany rysunek będzie zasłonięty, ustawia się osobno:

document.layers["Blok"].clip.top - górna
document.layers["Blok"].clip.right - prawa
document.layers["Blok"].clip.bottom - dolna
document.layers["Blok"].clip.left - lewa

W Exploratorze wszystkie wartości są zawarte w jednej instrukcji. Jest to wygodne, jeżeli blok należy przesunąć w pewnie miejsce. Gorsze, jeżeli chcemy przesunąć o wektor, bo ze stringu trzeba wyciągnąć obecne wartości dotyczące położenia bloku. Modyfikacja odbywa się następująco:

document.all["Blok"].style.clip="rect(10px 100px 50px 20px)"

Wartość px można pominąć, można ją także zastąpić przecinkiem bądź średnikiem. Explorer jest tolerancyjny na różne znaki rozdzielające. Kolejne wartości clip są takie, jak definiowane w stylach.

Przykładowa funkcji, która pobiera cztery zmienne potrzebne do określenia położenia krawędzi, może wyglądać tak:

function Widok(t,r,b,l) {
if (nn4) {
 document.layers["Blok"].clip.top=t;
 document.layers["Blok"].clip.right=r;
 document.layers["Blok"].clip.bottom=b;
 document.layers["Blok"].clip.left=l;
 }
 if (ie4) document.all["Blok"].style.clip="rect("+t+" "+r+" "+b+" "+l+")"
}

Obsługa wspomnianego przesuwania bloku o zadaną wartość wymaga uwzględnienia poprzedniego położenia warstwy. W Navigatorze nie ma tego problemu, bo każda wartość jest określona poprzez osobny parametr. W Exploratorze wartości te są w postaci stringu i wyglądają przykładowo: rect(0px 100px 60px 20px). Zadanie polega na oddzieleniu poszczególnych wartości.

Po pierwsze za nową zmienną ieClip podstawiamy string przechowywany w parametrze clip. Następnie należy skupić się tylko na liczbach i px, nawiasy są niepotrzebne do modyfikacji. Do tego należy wykorzystać instrukcję substring() :

ieClip=document.all["Blok"].style.clip;
ieClip=ieClip.substring(5, ieClip.length-1);

Teraz zmienna ieClip zawiera wyłącznie to, co znajduje się pomiędzy nawiasami, czyli tylko liczby i jednostki. Użycie split()  spowoduje stworzenie tablicy, która będzie zawierała wszystkie wartości:

ieArray=ieClip.split("px");

Zmienna ieArray jest teraz zmienną tablicową, która zawiera kolejne wartości potrzebne do modyfikacji clip. Zmienne są jednak stringami, dlatego należy je konwertować do liczby poprzez parseInt():

t+=parseInt(ieArray[0]);
r+=parseInt(ieArray[1]);
b+=parseInt(ieArray[2]);
l+=parseInt(ieArray[3]);

document.all["Blok"].style.clip="rect(" +t+ " " +r+ " " +b+ " " +l+ ")";

Wszystkie te instrukcje razem są kompletne do przesuwania warstwy o wektor.

Możliwość użycia clip daje niewątpliwie ciekawe efekty. Jest jednak ograniczenie, takim jak bezwzględne położenie bloku - Absolute. Ponadto obsługa w Navigatorze wymaga nieco zabezpieczeń. Jeżeli wartości clip będą większe niż rozmiary bloku, a LAYER-BACKGROUND-COLOR będzie inny niż tło strony, to rozmiary warstwy powiększą się. Ten nadmiar będzie widoczny w postaci koloru warstwy. W Exploratorze nie ma tego problemu, wartości mogą być większe niż blok, ale i tak nic się nie stanie.

Zawartość warstwy

Dynamiczny HTML pozwala zmieniać zawartość warstwy. Polega to na umieszczeniu w niej nowego kodu HTML. Można w ten sposób wprowadzić nie tylko tekst, ale także grafikę, tabelę itd.

if (nn4) {
 document.layers["Blok"].document.open();
 document.layers["Blok"].document.write(Kod);
 document.layers["Blok"].document.close();
}
if (ie4) document.all["Blok"].innerHTML=Kod;

Kod jest zmienną zawierającą kod, który należy wkleić do warstwy, jest zmienną typu string . To, co ma być wklejone do bloku można pobrać z formularza albo ramki .

 

Kolejną użyteczną rzeczą jest możliwość zamienienia dokumentu na nowy dynamicznie stworzony. Podobne, jak miało miejsce w okienkach przeglądarek. Zasadnicza różnica polega na tym, że nowy dynamiczny dokument pojawi się w tym samym okienku, z tym samym adresem URL. W tym przypadku nie ma rozróżnienia na przeglądarki, obydwie wykorzystują tę same instrukcje:

document.write(Kod);
document.close(); 

Kolejną możliwością zmieniania zawartości warstwy jest wstawienie do niej całej strony WWW, czyli zawartości pliku. W Exploratorze należy do tego celu wykorzystać ramki. Odbywa się to w dwóch etapach. Po pierwsze do pływającej ramki IFRAME, której rozmiary są 0px na 0px (by nie była widoczna) ładowana jest strona. Po drugie korzystając z wyżej opisanego sposobu zawartość ramki zostaje załadowana do bloku. W Navigatorze strona zostaje załadowana bezpośrednio do obiektu <LAYER>. Oto funkcja:

function Ladowanie(plik) {
if(nn4) document.layers["BlokNN"].src = plik;
if(ie4) frames["RamkaIE"].document.location = plik
}

function Przepisz() {
document.all["BlokIE"].innerHTML = frames["RamkaIE"].document.body.innerHTML
}

Ladowanie() sprawdza, jaka przeglądarka obsługuje plik. Jeżeli jest to Navigator, to do obiektu <LAYER> zostanie załadowany plik i już gotowe. Jeżeli strona jest obsługiwana przez Explorera, to do ramki zostanie załadowana strona. Umieszczenie body w ostatnie instrukcji wiąże się z tym, że wkleić należy tylko zawartość bloku <BODY>. By całość wyglądała dobrze, konieczne jest jeszcze umieszczenie w każdym ładowanym pliku, skryptu, który spowoduje przeładowanie zawartości ramki do bloku. Skrypt wygląda następująco:

ie4=document.all ? true : false;
function DlaIE(){
if(ie4){
 if(parent.Przepisz) parent.Przepisz();
 }
}
window.onload=DlaIE;

Po załadowaniu pliku, ostatnia instrukcja wywoła funkcję, która wywoła funkcję Przepisz znajdującą się w głównym pliku. Ona znowu załaduje bo bloku plik. Powyższa funkcją może być równie dobrze o wiele krótsza

function DlaIE(){
if (document.all) parent.Przepisz();
}
onload=DlaIE;

Takie umieszczanie funkcji w ładowanych plikach nie jest zbyt wygodne, ale ma dużo zalet. Po pierwsze nie trzeba się troszczyć o to, by warstwa nie została pusta po załadowaniu głównego pliku. Wystarczy w obiekcie <LAYER> i <IFRAME> zadeklarować, jaki plik ma się wczytać podczas ładowania strony, o resztę zatroszczy się umieszczona w nim funkcją (przeładuje plik do warstwy). Po drugie umieszczanie takiej funkcji w głównym pliku może spowodować błędy, bo plik ładowany jest do warstwy dopiero po załadowaniu pliku do ramki- a to nie jest natychmiastowe (zależne od szybkości transmisji).

Końcowym etapem jest umieszczenie na głównej stronie pustego bloku i pływającej ramki z odpowiednim plikiem, który załaduje się jako pierwszy. Podobnie obiekt <LAYER>:

<LAVER ID="BlokNN" SRC="plik1.html" LEFT=150 TOP=80 WIDTH=250 BGCOLOR=Blue></LAYER>

<NOLAYER>
<IFRAME ID="RamkaIE" SRC="plik1.html" WIDTH=0 HEIGHT=0></IFRAME>
<DIV ID="BlokIE"></DIV>
</NOLAYER>

Parametry ID mają tę samą rolę, co NAME np. w ramkach, czy grafice.

Parametry okien

Zawansowane techniki DHTML-u pozwalają sprawdzać rozmiary okna przeglądarki, bądź rozdzielczość. W obu przeglądarkach rozdzielczość sprawdza się tak samo. Wystarczy, by był obsługiwany obiekt screen:

if (screen) {
 Szer=screen.availWidth;
 Wys=screen.availHeight;
}

Powyższa instrukcja zwróci rozmiary okna przeglądarki wraz z wszelkimi paskami, będą to takie rozmiary, jakby okno było zmaksymalizowane, czyli największe możliwe rozmiary okna. Aby móc odczytać rozdzielczość ekranu, należy użyć instrukcji:.

if (screen) {
 Szer=screen.width;
 Wys=screen.height;
}

Ponadto w Navigatorze jest możliwość sprawdzenia rozmiarów aktualnego okna. Jest to ta powierzchnia, gdzie znajduje się strona WWW, bez pasków przewijania.

if (nn4) {
 SzerOkna=innerWidth;
 WysOkna=innerHeight;
}

Instrukcja screen.colorDepth zwraca liczbę bitów na kolor.

Kolejnym rozwiązaniem użytecznym tylko w Navigatorze jest zdarzenie onresize. Jest ono wywoływane, gdy jest zmieniany rozmiar przeglądarki. Jeżeli używasz Navigatora, spróbuj zmienić rozmiar okna.

if (nn4) onresize=ZmianaRozmiaru;

function ZmianaRozmiaru() {
if ((innerWidth!=SzerOkna) || (innerHeight!=WysOkna))
 alert("Zmienił się rozmiar okna")
}

Wszystkie zdarzenie wywoływane spod bloku, gdzie znajdują się skrypty (nie np. przy elementach stron WWW) nie wymagają użycia nawiasu. Nie należy wywoływać też metod bezpośrednio przez zdarzenia, bo mogą wyniknąć z tego błędy. Najlepiej wywołać funkcję (jak wyżej), a w niej umieścić właściwe instrukcje. Ponadto tak umieszczone zdarzenie jest aktywne cały czas. Jest to zdarzenie związane z oknem i każda jego zmiana rozmiaru spowoduje wywołanie go.

Ciekawy efekt można uzyskać przemieszczając okno przeglądarki. Służy do tego funkcja moveBy(). Pobiera dwa argumenty, wg, których będzie przesuwała okno. Pierwszy poziomy, drugi pionowy. Przesuwanie polega na zmianie pozycji okna o zadany wektor względem położenia poprzedniego: Funkcja działa poprawnie w IE. Można ją także uzyskać w Navigatorze, ale nie można jej tak dokładnie kontrolować.

if (moveBy)
for (i=10; i>0; i--) {
 moveBy(i,0);
 moveBy(-i,0);
}

Obsługa myszki i klawiatury

Bardzo pomocnym narzędziem do tworzenia zaawansowanych interaktywnych stron jest możliwość obsługi myszki. Można kontrolować chwilową pozycję myszki, naciśnięcia i zwolnienia przycisków. Jak widać wyżej, pojawia się tutaj bardzo dużo nowych instrukcji, obiektów i zdarzeń.

Wszystko opiera się na trzech zdarzeniach, o których było już wcześniej:

document.onmousemove=Ruch;
document.onmousedown=Wcisniety;
document.onmouseup=Puszczony;

Dodatkowo w przypadku Navigatora musimy zadeklarować, że chcemy przechwytywać te trzy (lub więcej) typy zdarzeń. Jest to niezbędne jeżeli zdarzenia mają działać w Navigatorze.

if(nn4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

Działanie funkcji obsługujących zdarzenia związane z myszka (i z klawiaturą) różni się bardzo w obydwu przeglądarkach. W przypadku Navigatora zdarzenia myszki wywołują funkcję przekazując jej automatycznie jeden niezbędny argument.

Na początek funkcja, która kontroluje ruch myszki, przechwytuje współrzędne i wypisuje je na pasku statusu.

function Ruch(e) {
if (nn4) {
 x=e.pageX; - przechwytuje odległość od lewej strony,
 y=e.pageY; - przechwytuje odległość od góry,
 }
if (ie4) {
 x=event.clientX + document.body.scrollLeft;
 y=event.clientY + document.body.scrollTop;
 }
status="pozycja myszki: ("+x+", "+y+")";
}

Tak wyglądają instrukcję odpowiedzialne za podstawienie za zmienną x y odpowiednich wartości. document.body.scrollLeft oraz document.body.scrollTop są konieczne dla Explorera, bo jego wartości położenia myszki dotyczą jej położenia względem górnej, lewej krawędzi ekranu. Nie jest przewidziana opcja, gdy strona jest dłuższa niż ekran, dlatego wymagana jest taka modyfikacja.

Teraz obsługa przycisków myszki. Podobnie jak wyżej pobierany jest argument e od zdarzenia. Funkcja Przycisk() (poniżej) sprawdza, który przycisk jest kliknięty i zwraca jego "numer":

function Wcisniety(e) {
if (Przycisk(e) == 1) ktory="lewy";
else ktory="prawy"
status=ktory +" przycisk wciśnięty";
}

function Przycisk(e) {
if (nn4) return e.which;
if (ie4) return event.button;
}

Na zakończenie funkcja, która wypisze na pasku statusu, że dany przycisk został zwolniony:

function Puszczony(e) {status="przycisk zwolniony";} 

Istnieje możliwość tak skonstruowania zdarzenia, że będzie ono aktywne tylko dla konkretnej warstwy. Poniższy przykład pokazuje, jak wywołać zdarzenie dla konkretnego bloku. Oznacza to, że poza tym blokiem zdarzenia nie będą działały.

if(nn4) {
  document.layers['Blok'].onmousemove=Ruch
  document.layers['Blok'].captureEvents(Event.MOUSEMOVE);
}
if (ie4) document.all['Blok'].onmousemove=Ruch; 

Poniżej jest tabela dostępnych zdarzeń dla Dynamicznego HTML-a związanych z myszką:

onmouseover	wskaźnik myszki wjeżdża w obszar elementu
onmouseout	wskaźnik myszki opuszcza obszar elementu
onmousedown	naciśniecie przycisku myszki
onmouseup	zwolnienie przycisku myszki
onmousemove	ruch myszki ponad elementem
onclick	kliknięcie przycisku myszki, bez przytrzymania!
ondblclick	podwójne kliknięcie przyciskiem myszki

 

Z obsługą klawiatury jest trochę mniej problemów. Zdarzenia do obsługi klawiatury są dwa. Kiedy klawisz jest naciśnięty i puszczony:

document.onkeydown
document.onkeyup

Funkcja tak jak wyżej pobiera argument:

function PrzyciskDown(e) {
if (nn4) Key=e.which;
if (ie4) Key=event.keyCode;
}

Za zmienną Key zostaje podstawiony kod przycisku. Problemem jest to, że każda przeglądarka ma swoje własne kody przycisków, dlatego nie polecam korzystania z kodu. W zamian za to można konwertować kod do zmiennej przez String.fromCharCode():

alert(String.fromCharCode(Key));

Po konwersji podstawowe klawisze literowe i cyfry są takie same. Wadą jest to, że Explorer nie rozróżnia klawiszy z SHIFT-em.

Tooltip (baloniki)

Ciekawym rozwiązaniem jest stworzenie Tooltip-ów. Takie chmurki są pomocne, bo mogą zawierać informacje dotyczące pomocy dla danego elementu. Zasada działania polega na umieszczeniu warstwy tam, gdzie miało miejsce zdarzenie onMouseOver. Nowy Explorer pozwala stworzyć taką chmurkę poprzez uzupełninie atrybutu <TITLE> w linkach. Tyle, że takie rozwiązanie działa tylko w nowych Explorerach. Chmurki działaja wszędzie.

Na początek należy zdefiniować style. Aby wszystko było nie za długie proponuje skorzystania z właściwości CLASS. Definiujemy w stylach przykładową klasę:

.tooltip{POSITION:Absolute; VISIBILITY:Hidden; BACKGROUND-COLOR:Yellow; LAYER-BACKGROUND-COLOR:Yellow; WIDTH:150px; COLOR:Black; FONT-SIZE:12px}

Wyżej wymienione elementy są niezbędne do prawidłowego i ładnego działania balonika. Kolejnym etapem jest stworzenie warstw, które będą zawierały teksty do wyświetlenia. Należy wykorzystać stworzoną klasę:

<DIV CLASS="tooltip" ID="np">Zawartość</DIV>

W ten oto prosty sposób nie trzeba definiować każdej warstwy w stylach poprzez #Blok{}. Można to w ogóle opuścić, bo warstwa zostanie ustawiona wg klasy. Jeżeli każda chmurka ma jakieś inne parametry, to można część właściwości pozostawić w klasie, resztę umieścić w stylach, tworząc dla każdej warstwy osobne parametry.

Funkcje obsługujące pokazywanie i ukrywanie wygląda następująco:

function Pokaz(Blok, e) {
if (nn4) {
 document.layers[Blok].left=.pageX + 10;
 document.layers[Blok].top=e.pageY + 10;
 document.layers[Blok].visibility="visible";
}
if (ie4) {
 document.all[Blok].style.pixelLeft=document.body.scrollLeft + event.clientX + 10;
 document.all[Blok].style.pixelTop=document.body.scrollTop + event.clientY + 10;
 document.all[Blok].style.visibility="visible";
 }
}

function Ukryj(Blok) {
if (nn4) document.layers[Blok].visibility="hidden"
if (ie4) document.all[Blok].style.visibility="hidden";
}

Do funkcji Pokaz() są przekazywane dwa argumenty. Pierwszy zawiera informację, jaki blok ma być pokazany, drugi gdzie zdarzenie miało miejsce, aby móc poprawnie wyświetlić balonik obok np. linki. Obiekt event zawiera wspomniane informacje o położeniu myszki, ale każda przeglądarka inaczej go odczytuje. Ponadto dla Exploratora należy jeszcze dodać informacje o tym, o ile została dana strona przesunięta paskami przewijania. Można ten składnik opuścić, jeżeli jest pewność, że dana strona jest na tyle krótka, że przewijanie nie pojawi się. Liczby 10 są konieczne, by Tooltip nie pojawił się pod, ale obok myszki.

Wadą takiego działania jest fakt, że może się zdarzyć, że linka jest na końcu wiersza i chmurka niestety pojawi się za ekranem. Można temu zaradzić, sprawdzając, czy dane uzyskane za pomocą event nie są takie, że chmurka będzie poza rozmiarem przeglądarki. Ponadto ładne efekty można uzyskać poprzez opróżnienie wyświetlania warstwy i po kilkusekundowym czasie ukryciu bloku.

Różne

Dynamiczny HTML oferuje także inne funkcje, o których warto tylko wspomnieć.

• window.location="view-source:" + window.location.href ten kod wygeneruje źródło aktualnej strony. Spowoduje otwarcie programu, gdzie domyślnie takie źródło jest pokazywane.

• <DIV STYLE="FILTER: FlipV();"> - ta funkcja jest dostępna tylko w Exploratorze 4+. Powoduje odwrócenie zawartości warstwy do góry nogami - symetrycznie poziomo.
  <DIV STYLE="FILTER: FlipH();"> - jak wyżej, ale symetrycznie pionowo.

Aby filtry dobrze działały, należy podać co najmniej jedną z wielkości dotyczących wielkości bloku.

• document.body.style.backgroundPosition= x+ " " +y; - funkcja poruszająca tłem.
   Dostępna tylko dla przeglądarki Explorer 4+.

• <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=10.0,Transition=23)">
  <META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans
  (Duration=20.0,Transition=23)">
  umieszczenie tych dwóch linijek w bloku <HEAD> spowoduje różnego rodzaju (losowe) odsłanianie i zasłanianie ładowanej strony WWW. Wadą jest długi czas trwania animacji oraz jej dostępność tylko w Exploratorze 4+

• <A HREF=# onclick="window.external.AddFavorite('adres_strony', 
  'Tytuł)">Linka</A> - dodaje stronę do ulubionych. Explorer 4+.

• <A HREF=# onClick="this.style.behavior='url(#default#homepage)';
  this.setHomePage('adres_strony')">Linka</A> - ustawia daną stronę jako początkową, startową. Explorer 4+.

    To nie są oczywiście wszystkie dostępne możliwości.

"Artykuł ściągnięty ze strony Damiana Szczepanika:
http://www.republika.pl/dszczepanik"

---