Internetoví puristi považujú World Wide Web predovšetkým za prostriedok na šírenie informácií. Väčšina týchto informácií je v textovej podobe, ktorú je možné ľahko zobraziť pomocou ľubovoľného webového prehľadávača. Ale aj od počiatku webových stránok hrala grafika dôležitú úlohu pri vylepšovaní stránky so základným textom. V dnešnej dobe nie je nič neobvyklé vidieť webové stránky, ktoré majú deväťdesiat percent grafiky. Tieto stránky nemusia zodpovedať striktnej koncepcii šírenia informácií, ale niektoré z nich sú určite atraktívne.
Väčšina z nás sa usiluje o rovnováhu medzi textom a grafikou na našich webových stránkach. Grafika slúži na vylepšenie vzhľadu a čitateľnosti stránky. Typické použitia grafiky zahŕňajú bannery, reklamy od sponzorských spoločností a farebné odrážky na zvýraznenie dôležitých častí textu.
Skriptovací jazyk JavaScript možno použiť na vylepšenie grafiky, ktorú umiestňujete na svoje webové stránky. Na dynamické riadenie grafického obsahu stránky je možné použiť JavaScript. Napríklad môžete zobraziť jedno pozadie svojej stránky ráno a druhé popoludní. A v noci môžete použiť pozadie hviezdneho poľa. Alebo môžete pomocou JavaScriptu vytvoriť displej pre digitálne hodiny, počítadlá zásahov, stĺpcové grafy a ďalšie.
V stĺpci tohto mesiaca sa uvádza niekoľko spôsobov, ako môžete použiť JavaScript a grafiku. V tejto diskusii však chýba jedna pozoruhodná téma: použitie JavaScriptu na animáciu. Táto téma si zaslúži svoj vlastný stĺpec, ktorý bude čoskoro k dispozícii.
Pochopenie prvku obrázka HTML
The element je najbežnejšie používaná značka na vyjadrenie grafického obsahu v dokumente HTML (najnovšie špecifikácie HTML pridávajú prvok, ale Netscape a väčšina ďalších prehľadávačov ho zatiaľ nepodporujú). Pre nezasvätených syntax základného
značka je:
kde „url“ je správne zostavená adresa URL obrázkového súboru. Adresa URL môže byť absolútna alebo relatívna. Pamätajte, že nie všetky prehľadávače sú vybavené na zobrazovanie grafiky. Preto je vhodné pre obrázok zahrnúť „alternatívny text“ pre tých, ktorí majú problém s obrázkom. Použite atribút ALT vo vnútri súboru značka na určenie alternatívneho textu. Tu je príklad:
Obrázky vytvorené pomocou tagy sa považujú za „vložené“, pretože sa s nimi zaobchádza rovnako ako s textovými znakmi. To znamená, že môžete obrázky prekladať textom a prehliadač sa postará o to, aby všetko správne prúdilo.
Väčšina obrázkov je však vyššia ako text, ktorý ich obklopuje. Bežné správanie väčšiny prehľadávačov je umiestniť spodnú časť obrázka do jednej roviny s dolnou časťou textu, ktorý ho obklopuje. Toto správanie môžete zmeniť, ak chcete iné zarovnanie. Najbežnejšie možnosti zarovnania, ktorým rozumejú všetky prehľadávače zobrazujúce obrázky, sú:
- dole - Zarovná text k dolnej časti obrázka. Toto je predvolené nastavenie.
- stred - Zarovná text do stredu obrázka.
- hore - Zarovná text k hornej časti obrázka.
Naraz môžete použiť iba jedno zarovnanie. Syntax je:
Prehliadače obyčajne zobrazujú obrázky v „prirodzenej veľkosti“. Ak má obrázok napríklad 100 pixelov na 100 pixelov, potom je taký veľký, aký je obrázok vykreslený na obrazovke prehliadača. Ale s Netscape môžete zmeniť veľkosť obrázka, ak chcete, aby bol menší alebo väčší, pomocou atribútov WIDTH a HEIGHT. Výhodou týchto atribútov je, že keď sa použije, prehľadávač vytvorí pre obrázok prázdne políčko a potom po načítaní celej stránky vyplní toto políčko obrázkom. To používateľov upozorňuje, že sa na tomto mieste očakáva grafika.
Zadajte iba šírku alebo výška mení proporcionálne veľkosť obrázka. Napríklad zadaním veľkostí štvorcového obrázka do výšky a šírky 100 pixelov. Ak pôvodný obrázok nie je štvorcový, je zmenšený v relatívnom pomere. Napríklad ak je pôvodný obrázok široký 400 pixelov a vysoký 100 pixelov, zmena šírky na 100 pixelov zníži jeho veľkosť na 25 pixelov.
- Zadajte šírku a výška vám umožní ľubovoľne meniť proporciu obrázka. Môžete napríklad transformovať tento obrázok s veľkosťou 400 x 100 pixlov na 120 x 120, 75 x 90 alebo čokoľvek iné.
Napríklad:
Pozor: V kombinácii s JavaScriptom by ste mali vždy uveďte atribúty HEIGHT a WIDTH pre
Kombinácia obrázkov s jazykom JavaScript
JavaScript je možné použiť na vylepšenie obrázkov použitých v dokumentoch HTML. Môžete napríklad použiť JavaScript na dynamické vytvorenie stránky pomocou obrázkov vybraných podmieneným testovacím výrazom, ako je napríklad denná doba.
Aplikácia digitálnych hodín JavaScriptu, ktorá využíva JavaScript a sortiment obrázkov GIF, je v skutočnosti jednou z najpopulárnejších na webe. Príklad clock.html používa na zobrazenie aktuálneho času JavaScript pomocou veľkých zelených číslic LED. Každá číslica je samostatný súbor GIF, ktorý je pomocou JavaScriptu spojený a vytvára tvár digitálnych hodín.
Použil som digitálne súbory GIF poskytnuté Russom Walshom; Russ láskavo umožňuje, aby jeho GIFy boli voľne použité na webových stránkach, pokiaľ bude poskytnutý správny kredit. Môžete použiť ľubovoľné číslice svojich hodín, musíte však uviesť samostatný súbor GIF pre každú číslicu a samostatný súbor pre každú dvojbodku a ukazovateľ am / pm. Zmeňte kód clock.html tak, aby odkazoval na číselné súbory, ktoré chcete použiť.
Poznámka: Je dôležité, aby ste poskytli absolútna URL použitých obrázkov. Inak Netscape grafiku nezobrazí. Príklad clock.html používa funkciu (pathOnly) na extrahovanie aktuálnej cesty k dokumentu. Skript preto očakáva, že nájde obrázky na rovnakej ceste ako dokument. Prípadne môžete absolútnu adresu URL napevno napísať, ak obrázky umiestnite inde, alebo môžete použiť značku na začiatku dokumentu a explicitne povedať Netscape základnú adresu URL, ktorú chcete použiť.JavaScriptové digitálne hodiny
Digitálne hodiny JavaScript var Temp; setClock (); funkcia setClock () {var OpenImg = '
'Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); teraz = 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}
funkcia pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }
Hodiny JavaScript
Aktuálny čas je: document.write (Temp);
Používanie JavaScriptu s obrazovými mapami na strane klienta
Ak máte to šťastie, že máte kontrolu nad serverom, ktorý obsahuje vaše publikované webové stránky, pravdepodobne ste vyskúšali obrázkové mapy na strane servera. Toto sú obrázky, ktoré boli „rozrezané“ na menšie kúsky; keď používateľ klikne na každý blok, server reaguje na inú akciu.
Nevýhodou obrazových máp na strane servera je, že na spracovanie žiadostí o kliknutie potrebujete program CGI spustený na serveri. Nie každý má prístup CGI. Obrázkové mapy na strane klienta to menia: „Inteligencia“ na disekovanie obrazu a nasmerovanie používateľa na správny odkaz - na základe oblasti obrázka, na ktorú ste klikli - je zabudovaná do prehľadávača. Netscape Navigator (verzia 2.0 a novšia) je jedným z mnohých prehľadávačov, ktoré teraz podporujú tento štandard.
Netscape posúva proces o krok ďalej, ale umožňuje vám integrovať obrazové mapy na strane klienta s jazykom JavaScript. Na bežnej obrazovej mape na strane klienta sa obmedzujete iba na odkaz na inú stránku. Ak chcete, môžete "odkazovať" na funkciu JavaScriptu a poskytnúť svojim obrazovým mapám ešte viac inteligencie. Môžete napríklad vytvoriť ovládací panel, ktorý používateľom umožní úspešné kliknutie na tlačidlo obrázka iba v prípade, že bola poskytnutá nejaká informácia - napríklad meno používateľa.
Anatómia obrazovej mapy na strane klienta
Na vytvorenie obrazových máp na strane klienta sa používajú dve nové značky HTML. Sú to značka, ktorá definuje štruktúru mapy, a jedna alebo viac značiek, ktoré definujú oblasti, na ktoré je možné kliknúť v rámci obrázka. Ak chcete vytvoriť obrazovú mapu, definujte značku a pomenujte mapovanie. Syntax je:
Pre mapu môžete použiť ľubovoľný názov, ktorý by mal obsahovať iba abecedné a číselné znaky. Výnimkou je podčiarknutie, ale nepoužívajte podčiarknutie pre prvý znak. Ďalej definujte jednu alebo viac značiek, ktoré definujú oblasti vášho obrázka. Značka má syntax:
Za poslednou značkou použite značku na označenie konca mapovania.
Poslednou položkou je obrázok, ktorý chcete použiť, s odkazom na mapu oblasti, ktorú ste predtým definovali. Použite štandard značka s novým atribútom USEMAP. Pre atribút USEMAP uveďte názov mapy. Tu je príklad:
Táto mapa používa obrázok s názvom control.gif. The Značka odkazuje na názov mapy, ktorý je #control (pred menom si všimnite hash). Ostatné atribúty poskytované s
značky nie sú ohraničené (BORDER = 0) a šírka a výška obrázka. Keď vaši používatelia kliknú na šípku späť (čo je prvá definovaná oblasť), odošlú sa na stránku index.html. Naopak, ak kliknú na „tlačidlo“ obsahu (druhá definovaná oblasť), dostanú sa na stránku s názvom toc.html. A ak kliknú na šípku dopredu, dostanú sa na stránku nazvanú backpage.html.
Pridanie JavaScriptu do ovládacieho prvku obrázkovej mapy
Na rozšírenie funkčnosti obrazových máp na strane klienta je možné použiť JavaScript. Pre väčšiu flexibilitu uveďte názov funkcie JavaScript pre HREF v značke. Namiesto preskočenia na niektorú stránku sa vykoná váš kód JavaScript, v ktorom môžete robiť všetko, čo chcete. Trik: Použite pre adresu URL protokol JavaScript: a postupujte podľa neho s názvom funkcie, ktorú chcete použiť.
Predpokladajme napríklad, že chcete, aby sa používatelia po kliknutí na šípku späť vrátili späť iba o jednu stránku v zozname histórie. Môžete použiť metódu window.history.go (-1) na presun o jednu stránku späť v zozname histórie používateľa. Celú túto funkciu môžete poskytnúť po protokole JavaScript:, alebo môžete zavolať používateľom definovanú funkciu, ktorá obsahuje túto inštrukciu. Tu sú obe metódy:
alebo ...
... a inde v dokumente:
funkcia goBack () {window.history.go (-1); } Osobne uprednostňujem druhú metódu, pretože často potrebujem poskytnúť množstvo funkcií JavaScriptu, ktoré chcem vykonávať. Môžete však použiť akúkoľvek metódu, ktorá sa vám najviac páči a ktorá najlepšie vyhovuje situácii.
Nasleduje pracovný príklad použitia obrazových máp na strane klienta s jazykom JavaScript. Tlačidlá zobrazujú výstražné okno, ktoré vám ukazuje, že adresa URL Java Script: skutočne funguje. Fungujú aj tlačidlá dopredu a dozadu - za predpokladu, že v zozname histórie máte stránky dopredu a dozadu. Ak je zoznam histórie prázdny (napríklad ste načítali dokument do nového okna), zostane aktuálna stránka.
Príklad obrázkovej mapy na strane klienta
Príklad funkcie Mapová obrazová mapa na strane klienta goBack () {alert ("Späť"); window.history.go (-1); }
funkcia goForward () {alert ("Forward"); window.history.go (1); }
function toc () {alert ("Obsah"); }
