Internetni puristi menijo, da je svetovni splet predvsem sredstvo za razširjanje informacij. Večina teh informacij je v besedilni obliki, ki jo lahko vsak brskalnik enostavno prikaže. Toda že od začetka spleta je grafika igrala pomembno vlogo pri izboljšanju osnovne besedilne strani. Dandanes ni neobičajno videti spletnih mest, ki predstavljajo devetdeset odstotkov grafike. Ta spletna mesta morda niso v skladu s strogim konceptom razširjanja informacij, vendar so nekatera zagotovo privlačna.
Večina nas stremi k ravnovesju med besedilom in grafiko na naših spletnih straneh. Grafika služi izboljšanju videza in berljivosti strani. Tipična uporaba grafike vključuje pasice, oglase sponzorskih podjetij in barvne krogle, ki poudarjajo pomembne dele besedila.
Skriptni jezik JavaScript lahko uporabite za izboljšanje grafike, ki jo vstavite na svoje spletne strani. JavaScript je mogoče uporabiti za dinamični nadzor grafične vsebine strani. Tako lahko na primer zjutraj prikažete eno ozadje strani, popoldne pa drugo. In ponoči lahko uporabite ozadje zvezdnega polja. Lahko pa uporabite JavaScript za ustvarjanje zaslona za digitalne ure, števce zadetkov, stolpčne grafikone in še več.
Mesečni stolpec opisuje več načinov uporabe JavaScript in grafike. Toda v tej razpravi manjka ena pomembna tema: uporaba JavaScripta za animacijo. Ta tema si zasluži svojo rubriko, ki bo kmalu na voljo.
Razumevanje elementa slike HTML
The element je najpogosteje uporabljena oznaka za predstavitev grafične vsebine v dokumentu HTML (najnovejše specifikacije HTML dodajo element, vendar ga Netscape in večina drugih brskalnikov še ne podpira). Za nepoznavalce je skladnja osnovnega
oznaka je:
kjer je "url" pravilno sestavljen URL za slikovno datoteko. URL je lahko absolutni ali relativni. Ne pozabite, da niso vsi brskalniki opremljeni za prikaz grafike. Zato je priporočljivo, da vključite "nadomestno besedilo" za sliko za tiste, ki jih izzivajo. Uporabite atribut ALT znotraj oznaka za določitev nadomestnega besedila. Tu je primer:
Slike, ustvarjene z oznake se štejejo za "vstavljene", ker so obravnavane tako kot besedilni znaki. To pomeni, da lahko slike premešate z besedilom, brskalnik pa bo poskrbel, da bo vse teklo pravilno.
Večina slik pa je višja od besedila, ki jih obdaja. Običajno vedenje večine brskalnikov je, da dno slike poravna z dnom besedila, ki ga obdaja. To vedenje lahko spremenite, če želite drugačno poravnavo. Najpogostejše izbire poravnave, ki jih razumejo vsi brskalniki, ki prikazujejo slike, so:
- dno - poravna besedilo na dno slike. To je privzeto.
- sredina - poravna besedilo na sredino slike.
- top - poravna besedilo na vrh slike.
Hkrati lahko uporabite samo eno poravnavo. Sintaksa je:
Brskalniki običajno prikazujejo slike v njihovi "naravni velikosti". Če je slika na primer 100 pik na 100 slikovnih pik, je tolikšna, ko je upodobljena na zaslonu brskalnika. Toda z Netscape lahko spremenite velikost slike, če jo želite manjšo ali večjo, z uporabo atributov WIDTH in HEIGHT. Prednost teh atributov je, da pri uporabi brskalnik ustvari prazno polje za sliko, nato pa polje napolni s sliko, ko se naloži celotna stran. To nakazuje uporabnikom, da se na tem mestu pričakuje grafika.
Navedite samo širino ali height spremeni sorazmerno velikost slike. Na primer, določite velikosti kvadratne slike do višine in širine 100 slikovnih pik. Če izvirna slika ni kvadratna, je velikost sorazmerna. Če je na primer izvirna slika široka 400 slikovnih pik in visoka 100 slikovnih pik, sprememba širine na 100 slikovnih pik zmanjša sliko na 25 pik visoko.
- Določitev širine in višina omogoča spreminjanje deleža slike na kakršen koli način. Tako lahko na primer sliko 400 x 100 slikovnih pik pretvorite v 120 x 120, 75 x 90 ali kar koli drugega.
Na primer:
Previdno: V kombinaciji z JavaScriptom bi morali nenehno navedite atributa HEIGHT in WIDTH za
Združevanje slik z JavaScriptom
JavaScript lahko uporabimo za izboljšanje slik, ki se uporabljajo v dokumentih HTML. Na primer, lahko uporabite JavaScript za dinamično ustvarjanje strani z uporabo slik, ki jih izbere pogojni testni izraz, na primer čas dneva.
Dejansko je aplikacija za digitalno uro JavaScript, ki uporablja JavaScript in vrsto slik GIF, ena najbolj priljubljenih v spletu. Primer clock.html uporablja JavaScript za prikaz trenutnega časa z velikimi zelenimi LED-številkami. Vsaka številka je posamezen GIF, ki ga JavaScript sestavlja v obraz digitalne ure.
Uporabil sem digitalne GIF-je, ki jih je zagotovil Russ Walsh; Russ prijazno dovoli, da se njegovi GIF-ji prosto uporabljajo na spletnih straneh, če je le-ta upravičen. Za uro lahko uporabite poljubne številke, vendar morate za vsako številko navesti ločeno datoteko GIF in ločene datoteke za indikatorje dvopičja in am / pm. Spremenite kodo clock.html tako, da se sklicuje na števčne datoteke, ki jih želite uporabiti.
Opomba: Pomembno je, da navedete absolutno URL slik, ki jih uporabljate. V nasprotnem primeru Netscape ne bo prikazal grafike. Primer clock.html uporablja funkcijo (pathOnly) za ekstrakcijo trenutne poti dokumenta. Skript zato pričakuje, da bo slike našel na isti poti kot dokument. Lahko pa tudi trdo kodirate absolutni URL, če slike postavite drugam, ali pa uporabite oznako na začetku dokumenta, da Netscapeu izrecno poveste osnovni URL, ki ga želite uporabiti.Digitalna ura JavaScript
JavaScript Digital Clock var Temp; setClock (); funkcija setClock () {var OpenImg = '
'Temp = "" zdaj = nov datum (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); zdaj = null; če (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}
funkcija pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }
Ura JavaScript
Trenutni čas je: document.write (Temp);
Uporaba JavaScript-a s slikovnimi zemljevidi na strani odjemalca
Če imate dovolj sreče, da imate nadzor nad strežnikom, ki vsebuje vaše objavljene spletne strani, ste verjetno posegli po strežniških slikovnih zemljevidih. To so slike, ki so bile "razsekane" na manjše kose; ko uporabnik klikne vsak kos, se strežnik odzove na drugačno dejanje.
Slaba stran strežniških zemljevidov slik je, da za obdelavo zahtev za klike potrebujete program CGI, ki se izvaja na strežniku. Dostop do CGI nimajo vsi. Slikovni zemljevidi na strani odjemalca to spremenijo: v brskalnik je vgrajena "inteligenca" za seciranje slike in usmerjanje uporabnika do ustrezne povezave, ki temelji na območju slike, ki je bila kliknjena. Netscape Navigator (različica 2.0 in novejše) je eden izmed mnogih brskalnikov, ki zdaj podpirajo ta standard.
Netscape postopek popelje še dlje, vendar vam omogoča, da integrirate slikovne zemljevide na strani odjemalca z JavaScriptom. V navadnem zemljevidu slik na strani odjemalca ste omejeni zgolj na povezavo do druge strani. Če želite, se lahko "povežete" s funkcijo JavaScript in svojim slikovnim zemljevidom daste še več inteligence. Na primer, lahko ustvarite nadzorno ploščo, ki uporabnikom omogoča, da uspešno kliknejo slikovni gumb le, če je naveden kakšen podatek - recimo uporabniško ime -.
Anatomija slikovnega zemljevida na strani odjemalca
Dve novi oznaki HTML se uporabljata za ustvarjanje slikovnih zemljevidov na strani odjemalca. So oznaka, ki določa strukturo zemljevida, in ena ali več oznak, ki določajo območja, ki jih je mogoče klikniti. Če želite ustvariti slikovni zemljevid, definirajte oznako in preslikavi dajte ime. Sintaksa je:
Za zemljevid lahko uporabite večino poljubnih imen, vendar naj vsebuje samo abecedne in številske znake. Izjema je podčrtaj, vendar se izogibajte uporabi podčrtaja za prvi znak. Nato določite eno ali več oznak, ki določajo področja vaše slike. Oznaka ima sintakso:
Po zadnji oznaki z oznako označite konec preslikave.
Zadnji element je slika, ki jo želite uporabiti, s sklicevanjem na zemljevid območja, ki ste ga že določili. Uporabite standard z novim atributom USEMAP. Za atribut USEMAP navedite ime zemljevida. Tu je primer:
Ta zemljevid uporablja sliko z imenom control.gif. The tag se sklicuje na ime zemljevida, ki je #control (upoštevajte zgoščenost pred imenom). Drugi atributi, priloženi
Oznaka ni obroba (BORDER = 0) ter širina in višina slike. Ko uporabniki kliknejo puščico nazaj (kar je prvo določeno področje), se pošljejo na stran index.html. Če pa kliknejo na gumb "vsebina" (drugo določeno področje), se preusmerijo na stran, imenovano toc.html. In če kliknejo puščico naprej, se preusmerijo na stran, imenovano backpage.html.
Dodajanje JavaScripta v nadzor zemljevida slik
JavaScript lahko uporabite za razširitev funkcionalnosti slikovnih zemljevidov na strani odjemalca. Za večjo prilagodljivost v oznako vnesite ime funkcije JavaScript za HREF. Namesto da bi skočili na neko stran, se izvede vaša koda JavaScript, v kateri lahko storite vse, kar želite. Trik: Za URL uporabite protokol JavaScript: in sledite mu z imenom funkcije, ki jo želite uporabiti.
Denimo, da želite, da se uporabniki vrnejo nazaj le na eno stran na seznamu zgodovine, ko kliknejo puščico nazaj. Z metodo window.history.go (-1) lahko skočite nazaj za eno stran na seznamu zgodovine uporabnika. Celotno to funkcijo lahko zagotovite po protokolu JavaScript: ali pa pokličete uporabniško določeno funkcijo, ki vsebuje to navodilo. Tu sta obe metodi:
ali ...
... in drugje v dokumentu:
funkcija goBack () {window.history.go (-1); } Osebno imam raje slednjo metodo, ker moram pogosto zagotoviti številne funkcije JavaScript, ki jih želim izvajati. Lahko pa uporabite katero koli metodo, ki vam je najbolj všeč in ki najbolje ustreza situaciji.
Sledi delovni primer uporabe slikovnih zemljevidov na strani odjemalca z JavaScriptom. Gumbi prikažejo opozorilno polje, ki vam pokaže, da URL: JavaScript: res deluje. Delujeta tudi gumba za naprej in nazaj - ob predpostavki, da imate na seznamu zgodovine strani naprej in nazaj. Če je seznam zgodovine prazen (dokument ste naložili na primer v novo okno), ostane trenutna stran.
Primer zemljevida slike na strani odjemalca
Na sliki na strani odjemalca Primer funkcije goBack () {opozorilo ("Nazaj"); window.history.go (-1); }
funkcija goForward () {alert ("Posreduj"); window.history.go (1); }
funkcija toc () {opozorilo ("Kazalo"); }
