Internetoví puristé považují World Wide Web především za prostředek šíření informací. Velká část těchto informací je v textové podobě, kterou lze snadno vykreslit jakýmkoli webovým prohlížečem. Ale i od počátečních dnů webu hrála grafika důležitou roli při vylepšování základní textové stránky. V dnešní době není neobvyklé vidět webové stránky s devadesátiprocentní grafikou. Tyto stránky nemusí odpovídat přísné koncepci šíření informací, ale některé z nich jsou určitě atraktivní.
Většina z nás usiluje o rovnováhu mezi textem a grafikou na našich webových stránkách. Grafika slouží ke zlepšení vzhledu a čitelnosti stránky. Typická použití grafiky zahrnují bannery, reklamy sponzorských společností a barevné odrážky, které zvýrazňují důležité části textu.
Skriptovací jazyk JavaScript lze použít k vylepšení grafiky, kterou vkládáte na své webové stránky. K dynamickému ovládání grafického obsahu stránky lze použít JavaScript. Můžete například zobrazit jedno pozadí stránky ráno a druhé odpoledne. A v noci můžete použít pozadí hvězdného pole. Nebo můžete použít JavaScript k vytvoření zobrazení pro digitální hodiny, počitadla zásahů, sloupcové grafy a další.
Sloupec tohoto měsíce uvádí několik způsobů, jak můžete použít JavaScript a grafiku. V této diskusi však chybí jedno pozoruhodné téma: použití JavaScriptu pro animaci. Tento předmět si zaslouží svůj vlastní sloupek, který bude brzy k dispozici.
Porozumění prvku obrázku HTML
The element je nejčastěji používanou značkou pro reprezentaci grafického obsahu v dokumentu HTML (nejnovější specifikace HTML přidávají prvek, ale Netscape a většina ostatních prohlížečů jej dosud nepodporují). Pro nezasvěcené syntaxe základního
značka je:
kde „url“ je správně vytvořená adresa URL souboru obrázku. Adresa URL může být absolutní nebo relativní. Pamatujte, že ne všechny prohlížeče jsou vybaveny k zobrazování grafiky. Proto je vhodné přidat k obrázku „alternativní text“ pro ty, kteří mají problém s obrázkem. Použijte atribut ALT uvnitř tag pro určení alternativního textu. Zde je příklad:
Obrázky vytvořené pomocí tagy jsou považovány za „vložené“, protože se s nimi zachází stejně jako s textovými znaky. To znamená, že můžete obrázky prolínat s textem a prohlížeč se postará o to, aby vše probíhalo správně.
Většina obrázků je však vyšší než text, který je obklopuje. Normálním chováním většiny prohlížečů je umístit spodní část obrázku do jedné roviny s dolní částí textu, který jej obklopuje. Toto chování můžete změnit, pokud chcete jiné zarovnání. Nejběžnější možnosti zarovnání, kterým rozumí všechny prohlížeče, které zobrazují obrázky, jsou:
- dole - Zarovná text ke spodní části obrázku. Toto je výchozí nastavení.
- prostřední - Zarovná text do středu obrázku.
- nahoru - Zarovná text k horní části obrázku.
Můžete použít pouze jedno zarovnání najednou. Syntaxe je:
Prohlížeče obvykle zobrazují obrázky v „přirozené velikosti“. Pokud má obrázek například 100 pixelů na 100 pixelů, je tak velký, když je vykreslen na obrazovce prohlížeče. Ale s Netscape můžete změnit velikost obrázku, pokud chcete, aby byl menší nebo větší, pomocí atributů WIDTH a HEIGHT. Výhodou těchto atributů je, že při použití vytvoří prohlížeč prázdné pole pro obrázek a poté vyplní pole obrázkem při načítání celé stránky. To uživatele upozorňuje, že se na tomto místě očekává grafika.
Určete pouze šířku nebo výška mění proporcionálně velikost obrázku. Například zadáním velikosti čtvercového obrázku na výšku a šířku 100 pixelů. Pokud původní obrázek není čtvercový, má velikost v relativním poměru. Například pokud je původní obrázek široký 400 pixelů a vysoký 100 pixelů, změna šířky na 100 pixelů sníží obrázek na 25 pixelů na výšku.
- Určení šířky a výška umožňuje libovolně měnit proporce obrazu. Například můžete tento obraz 400 x 100 pixelů transformovat na 120 x 120, 75 x 90 nebo cokoli jiného.
Například:
Pozor: V kombinaci s JavaScriptem byste měli vždy poskytnout atributy VÝŠKA a ŠÍŘKA pro
Kombinace obrázků s JavaScriptem
K vylepšení obrázků použitých v dokumentech HTML lze použít JavaScript. Můžete například použít JavaScript k dynamickému vytvoření stránky pomocí obrázků vybraných podmíněným testovacím výrazem, například denní dobou.
Ve skutečnosti je aplikace Java Digital Clock, která používá JavaScript a sortiment obrázků GIF, jednou z nejpopulárnějších na webu. Příklad clock.html používá JavaScript k zobrazení aktuálního času pomocí velkých zelených LED číslic. Každá číslice je samostatný GIF, který je spojen pomocí JavaScriptu a tvoří tvář digitálních hodin.
Použil jsem číslice GIF poskytnuté Russem Walshem; Russ laskavě umožňuje, aby jeho GIFy byly volně používány na webových stránkách, pokud je poskytnut řádný kredit. Můžete použít libovolné číslice, které si přejete pro hodiny, ale musíte zadat samostatný soubor GIF pro každou číslici a samostatné soubory pro ukazatele dvojtečky a am / pm. Změňte kód clock.html tak, aby odkazoval na číselné soubory, které chcete použít.
Poznámka: Je důležité, abyste poskytli absolutní URL obrázků, které používáte. Jinak Netscape grafiku nezobrazí. Příklad clock.html používá funkci (pathOnly) k extrakci aktuální cesty k dokumentu. Skript proto očekává, že najde obrázky na stejné cestě jako dokument. Alternativně můžete absolutní URL napevno naprogramovat, pokud obrázky umístíte jinde, nebo můžete použít značku na začátku dokumentu a explicitně sdělit Netscape základní URL, kterou chcete použít.Digitální hodiny JavaScriptu
JavaScript Digital Clock var Temp; setClock (); funkce setClock () {var OpenImg = '
'Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); nyní = null; if (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } else Ampm = "am"; if (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute
CurHour = "" + CurHour; for (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}
funkce pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }
Hodiny JavaScriptu
Aktuální čas je: document.write (Temp);
Používání JavaScriptu s obrazovými mapami na straně klienta
Pokud máte to štěstí, že máte kontrolu nad serverem, který obsahuje vaše publikované webové stránky, pravděpodobně jste se pustili do obrazových map na straně serveru. Jedná se o obrázky, které byly „rozřezány“ na menší kousky; jak uživatel klikne na každý blok, server reaguje na jinou akci.
Nevýhodou obrazových map na straně serveru je, že ke zpracování požadavků na kliknutí potřebujete program CGI spuštěný na serveru. Ne každý má přístup CGI. Obrázkové mapy na straně klienta to mění: „Inteligence“ pro disekci obrazu a nasměrování uživatele na správný odkaz - založený na oblasti obrázku, na kterou byl kliknut - je zabudována do prohlížeče. Netscape Navigator (verze 2.0 a novější) je jedním z mnoha prohlížečů, které nyní tento standard podporují.
Netscape posune proces o krok dále, ale umožní vám integrovat obrazové mapy na straně klienta s JavaScriptem. V běžné obrazové mapě na straně klienta se omezujete pouze na odkaz na jinou stránku. Pokud chcete, můžete "odkazovat" na funkci JavaScriptu a dát svým obrázkovým mapám ještě více inteligence. Můžete například vytvořit ovládací panel, který uživatelům umožní pouze úspěšně kliknout na tlačítko obrázku, pokud byla poskytnuta nějaká informace - například uživatelské jméno.
Anatomie obrazové mapy na straně klienta
K vytvoření obrazových map na straně klienta se používají dvě nové značky HTML. Jsou to tag, který definuje strukturu mapy, a jeden nebo více tagů, které definují klikatelné oblasti v obraze. Chcete-li vytvořit obrazovou mapu, definujte značku a pojmenujte mapování. Syntaxe je:
Pro mapu můžete použít libovolný název, ale měl by obsahovat pouze abecední a číselné znaky. Výjimkou je podtržítko, ale nepoužívejte podtržítko pro první znak. Dále definujte jednu nebo více značek, které definují oblasti vašeho obrázku. Značka má syntaxi:
Za poslední značkou použijte značku k označení konce mapování.
Poslední položkou je obrázek, který chcete použít, s odkazem na mapu oblasti, kterou jste dříve definovali. Použijte standard značka s novým atributem USEMAP. U atributu USEMAP uveďte název mapy. Zde je příklad:
Tato mapa používá obrázek s názvem control.gif. The tag odkazuje na název mapy, což je #control (všimněte si hash před jménem). Další atributy poskytované s
tagy nemají žádné ohraničení (BORDER = 0) a šířku a výšku obrázku. Když vaši uživatelé kliknou na šipku zpět (což je první definovaná oblast), pošlou se na stránku index.html. Naopak, pokud kliknou na „tlačítko“ obsahu (druhá definovaná oblast), dostanou se na stránku nazvanou toc.html. A pokud kliknou na šipku vpřed, dostanou se na stránku nazvanou backpage.html.
Přidání JavaScriptu do ovládacího prvku obrazové mapy
K rozšíření funkčnosti obrazových map na straně klienta lze použít JavaScript. Pro větší flexibilitu uveďte název funkce JavaScriptu pro HREF ve značce. Místo skoku na nějakou stránku se spustí váš kód JavaScript, ve kterém můžete dělat, co chcete. Trik: Použijte pro adresu URL protokol JavaScript: a postupujte podle názvu funkce, kterou chcete použít.
Předpokládejme například, že chcete, aby se uživatelé po kliknutí na šipku zpět vrátili zpět pouze o jednu stránku v seznamu historie. Pomocí metody window.history.go (-1) můžete přeskočit o jednu stránku zpět v seznamu historie uživatele. Po protokolu JavaScript: můžete poskytnout celou tuto funkci nebo zavolat uživatelem definovanou funkci, která obsahuje tuto instrukci. Zde jsou obě metody:
nebo ...
... a jinde v dokumentu:
funkce goBack () {window.history.go (-1); } Osobně dávám přednost druhé metodě, protože často potřebuji poskytnout řadu funkcí JavaScriptu, které chci provést. Můžete však použít jakoukoli metodu, která se vám nejvíce líbí a která nejlépe odpovídá situaci.
Následuje funkční příklad použití obrazových map na straně klienta s JavaScriptem. Tlačítka zobrazují výstražné pole, které vám ukáže, že adresa URL JavaScript: skutečně funguje. Fungují také tlačítka vpřed a vzad - za předpokladu, že máte v seznamu historie stránky dopředu a dozadu. Pokud je seznam historie prázdný (například jste načetli dokument do nového okna), aktuální stránka zůstane.
Příklad obrazové mapy na straně klienta
Ukázková funkce obrazové mapy na straně klienta goBack () {alert ("Zpět"); window.history.go (-1); }
funkce goForward () {alert ("Přeposlat"); window.history.go (1); }
funkce toc () {alert ("Obsah"); }
