Interneto puristai mano, kad internetas pirmiausia yra informacijos sklaidos priemonė. Didžioji šios informacijos dalis yra teksto forma, kurią lengvai gali pateikti bet kuri interneto naršyklė. Tačiau net nuo pat interneto pradžios grafika vaidino svarbų vaidmenį tobulinant pagrindinį teksto puslapį. Šiais laikais nėra neįprasta matyti devyniasdešimt procentų grafinių svetainių. Šios svetainės gali neatitikti griežtos informacijos sklaidos koncepcijos, tačiau kai kurios jų tikrai yra patrauklios.
Daugelis iš mūsų savo tinklalapiuose siekia balanso tarp teksto ir grafikos. Grafika padeda pagerinti puslapio išvaizdą ir įskaitomumą. Tipiniai grafikos naudojimo būdai yra reklamjuostės, rėmėjų įmonių skelbimai ir spalvotos kulkos svarbiems teksto fragmentams paryškinti.
„JavaScript“ scenarijų kalba gali būti naudojama patobulinti grafiką, kurią įdėjote į savo tinklalapius. „JavaScript“ gali būti naudojamas dinamiškai valdyti puslapio grafinį turinį. Pavyzdžiui, galite rodyti vieną savo puslapio foną ryte, kitą - po pietų. Naktį galite naudoti žvaigždės lauko foną. Arba galite naudoti „JavaScript“, kad sukurtumėte skaitmeninių laikrodžių, hitų skaitiklių, juostinių diagramų ir dar daugiau ekraną.
Šio mėnesio stulpelyje pateikiami keli „JavaScript“ ir grafikos naudojimo būdai. Tačiau šioje diskusijoje trūksta vienos žymios temos: „JavaScript“ naudojimas animacijai. Ši tema nusipelno savo stulpelio, netrukus pasirodysiančio.
HTML vaizdo elemento supratimas
elementas yra dažniausiai naudojama žyma, vaizduojanti grafinį turinį HTML dokumente (naujausios HTML specifikacijos prideda elementą, tačiau „Netscape“ ir dauguma kitų naršyklių jo dar nepalaiko). Neišmanantiems - pagrindinio sintaksė
žyma yra:
kur „url“ yra tinkamai sukonstruotas vaizdo failo URL. URL gali būti absoliutus arba santykinis. Atminkite, kad ne visose naršyklėse yra grafika. Todėl patartina įterpti paveikslėlio „pakaitinį tekstą“ tiems, kurie ginčijasi dėl vaizdo. Naudokite ALT atributą žyma, kad nurodytumėte alternatyvų tekstą. Štai pavyzdys:
Vaizdai, sukurti naudojant žymos laikomos „įterptomis“, nes jos traktuojamos kaip teksto simboliai. Tai reiškia, kad galite susikirsti vaizdus su tekstu, o naršyklė pasirūpins, kad viskas tinkamai tekėtų.
Tačiau dauguma vaizdų yra aukštesni už juos supantį tekstą. Įprasta daugumos naršyklių elgsena yra tai, kad vaizdo apačia bus vienoda su ją supančio teksto apačia. Galite pakeisti šį elgesį, jei norite kito lygiavimo. Labiausiai paplitę lygiavimo pasirinkimai, kuriuos supranta visos naršyklės, kuriose rodomi vaizdai, yra šie:
- apačia - sulygina tekstą su paveikslėlio apačia. Tai yra numatytasis nustatymas.
- vidurys - sulygina tekstą su vaizdo viduriu.
- viršuje - tekstas sulyginamas su vaizdo viršumi.
Vienu metu galite naudoti tik vieną lygiavimą. Sintaksė yra:
Naršyklėse vaizdai paprastai būna „natūralaus dydžio“. Pavyzdžiui, jei vaizdas yra 100 x 100 taškų, tai jis yra didelis, kai jis pateikiamas naršyklės ekrane. Bet naudodami „Netscape“ galite pakeisti vaizdo dydį, jei norite, kad jis būtų mažesnis ar didesnis, naudodami atributus WIDTH ir HEIGHT. Šių atributų pranašumas yra tas, kad kai naudojama naršyklė sukuria tuščią vaizdo langelį, tada užpildo langelį vaizdu, kai įkeliamas visas puslapis. Tai įspėja vartotojus, kad toje vietoje tikimasi grafikos.
Nurodomas tik plotis arba aukštis proporcingai keičia vaizdo dydį. Pvz., Nurodant kvadratinio vaizdo dydį iki 100 pikselių aukščio ir pločio. Jei originalus vaizdas nėra kvadratinis, jis yra santykinai proporcingas. Pavyzdžiui, jei originalus vaizdas yra 400 taškų pločio ir 100 pikselių aukščio, pakeitus plotį į 100 pikselių, vaizdas sumažėja iki 25 pikselių aukščio.
- Nurodomas ir plotis ir aukštis leidžia jums pakeisti vaizdo proporciją bet kokiu būdu. Pvz., Galite transformuoti tą 400 x 100 pikselių vaizdą į 120 x 120, 75 x 90 ar bet ką kitą.
Pavyzdžiui:
Atsargiai: Derindami su „JavaScript“ turėtumėte visada pateikti AUKŠTUMO ir PLATIMO atributus
Vaizdų derinimas su „JavaScript“
„JavaScript“ gali būti naudojamas HTML dokumentuose naudojamiems vaizdams patobulinti. Pvz., Galite naudoti „JavaScript“, kad dinamiškai sukurtumėte puslapį naudodami vaizdus, pasirinktus pagal sąlyginę bandomąją išraišką, pvz., Dienos laiką.
Tiesą sakant, „JavaScript“ skaitmeninio laikrodžio programa, naudojanti „JavaScript“ ir GIF vaizdų asortimentą, yra viena populiariausių žiniatinklyje. „Clock.html“ pavyzdyje naudojamas „JavaScript“, kad būtų rodomas dabartinis laikas, naudojant didelius žalius LED skaitmenis. Kiekvienas skaitmuo yra individualus GIF, sujungtas „JavaScript“, kad sudarytų skaitmeninio laikrodžio veidą.
Naudojau Russ Walsh pateiktus skaitmeninius GIF; Russ maloniai leidžia laisvai naudoti savo GIF tinklalapiuose, jei tik suteikiamas tinkamas kreditas. Laikrodžiui galite naudoti bet kokius norimus skaitmenis, tačiau kiekvienam skaitmeniui turite pateikti atskirą GIF failą, o dvitaškio ir am / pm rodiklius - atskirus failus. Pakeiskite clock.html kodą, nurodydami skaitmenų failus, kuriuos norite naudoti.
Pastaba: Svarbu pateikti absoliutus Naudojamų vaizdų URL. Kitu atveju „Netscape“ grafika nebus rodoma. „Clock.html“ pavyzdyje naudojama funkcija (pathOnly) dabartiniam dokumento keliui išgauti. Todėl scenarijus tikisi atvaizdus rasti tame pačiame kelyje kaip ir dokumentas. Arba galite griežtai koduoti absoliutų URL, jei vaizdus įdėsite kitur, arba galite naudoti žymą dokumento pradžioje, kad aiškiai nurodytumėte „Netscape“ pagrindinį URL, kurį norite naudoti.„JavaScript“ skaitmeninis laikrodis
„JavaScript“ skaitmeninis laikrodis var Temp; setClock (); funkcija setClock () {var OpenImg = '
'Temp = "" dabar = nauja data (); var CurHour = dabar.getHours (); var CurMinute = now.getMinutes (); dabar = nulis; jei (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } else Ampm = "am"; jei (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute kita 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); }
„JavaScript“ laikrodis
Dabartinis laikas yra: document.write (Temp);
„JavaScript“ naudojimas su kliento pusės vaizdų žemėlapiais
Jei jums pasisekė valdyti serverį, kuriame yra jūsų paskelbti tinklalapiai, tikriausiai apipavidalinote serverio vaizdo žemėlapius. Tai vaizdai, kurie buvo „išpjauti“ į mažesnius gabalėlius; vartotojui spustelėjus kiekvieną gabalą, serveris reaguoja į skirtingą veiksmą.
Serverio pusės vaizdo žemėlapių trūkumas yra tas, kad jums reikia CGI programos, veikiančios serveryje, kad galėtumėte tvarkyti paspaudimo užklausas. Ne visi turi prieigą prie CGI. Kliento pusės vaizdo žemėlapiai tai keičia: „Naršyklėje įmontuotas„ intelektas “, leidžiantis išsklaidyti vaizdą ir nukreipti vartotoją į tinkamą nuorodą, atsižvelgiant į paspaudžiamo vaizdo plotą. „Netscape Navigator“ (2.0 ir naujesnė versija) yra viena iš daugelio naršyklių, kurios dabar palaiko šį standartą.
„Netscape“ žengia procesą dar labiau, tačiau leidžia integruoti kliento pusės vaizdo žemėlapius su „JavaScript“. Paprastame kliento pusės vaizdo žemėlapyje jūs apsiribojate tik nuoroda į kitą puslapį. Jei norite, galite „susieti“ su „JavaScript“ funkcija ir suteikti savo vaizdų žemėlapiams dar daugiau intelekto. Pvz., Galite sukurti valdymo skydą, kuris leidžia vartotojams sėkmingai spustelėti paveikslėlio mygtuką tik tuo atveju, jei pateikta kokia nors informacijos dalis, tarkime, vartotojo vardas.
Kliento pusės vaizdo žemėlapio anatomija
Dvi naujos HTML žymos naudojamos kuriant kliento pusės vaizdų žemėlapius. Jie yra žymė, apibrėžianti žemėlapio struktūrą, ir viena ar daugiau žymių, kurios apibrėžia paspaudžiamas sritis paveikslėlyje. Norėdami sukurti vaizdo žemėlapį, apibrėžkite žymą ir suteikite žemėlapiui pavadinimą. Sintaksė yra:
Žemėlapyje galite naudoti bet kokį pavadinimą, tačiau jame turėtų būti tik abėcėlės ir skaitiniai simboliai. Išimtis yra pabraukimas, tačiau venkite naudoti pirmojo simbolio pabraukimo. Tada apibrėžkite vieną ar daugiau žymų, apibrėžiančių jūsų vaizdo sritis. Žyma naudoja sintaksę:
Po paskutinės žymos naudokite žymą žymėdami susiejimo pabaigą.
Paskutinis elementas yra vaizdas, kurį norite naudoti, su nuoroda į anksčiau apibrėžtą vietovės žemėlapį. Naudokite standartą žymą su nauju USEMAP atributu. Nurodykite USEMAP atributą žemėlapio pavadinimui. Štai pavyzdys:
Šiame žemėlapyje naudojamas vaizdas, pavadintas „control.gif“. žyma nurodo žemėlapio pavadinimą, kuris yra #control (atkreipkite dėmesį į maišos prieš pavadinimą). Kiti atributai, pateikiami kartu su
žymos nėra kraštinės (BORDER = 0) ir vaizdo plotis bei aukštis. Kai jūsų vartotojai spustelėja rodyklę atgal (kuri yra pirmoji apibrėžta sritis), jie siunčiami į index.html puslapį. Ir atvirkščiai, jei jie spustelės turinio „mygtuką“ (apibrėžta antroji sritis), jie bus nukreipti į puslapį, vadinamą toc.html. Ir spustelėjus rodyklę pirmyn, jie pateks į puslapį, pavadintą backpage.html.
„JavaScript“ pridėjimas prie vaizdo žemėlapio valdymo
„JavaScript“ gali būti naudojamas išplėsti kliento pusės vaizdų žemėlapių funkcionalumą. Norėdami suteikti daugiau lankstumo, žymoje nurodykite HREF „JavaScript“ funkcijos pavadinimą. Užuot peršokęs į kokį nors puslapį, vykdomas „JavaScript“ kodas, kuriame galite padaryti viską, ko norite. Apgaulė: URL naudokite „JavaScript:“ protokolą ir nurodykite norimos naudoti funkcijos pavadinimą.
Pvz., Tarkime, kad norite, kad spustelėję rodyklę atgal, vartotojai grįžtų tik į vieną istorijos sąrašo puslapį. Norėdami pereiti atgal į vieną puslapį vartotojo istorijos sąraše, galite naudoti metodą window.history.go (-1). Galite pateikti visą šią funkciją po „JavaScript:“ protokolo arba iškviesti vartotojo apibrėžtą funkciją, kurioje yra ši instrukcija. Čia yra abu metodai:
arba ...
... ir kitur dokumente:
funkcija goBack () {window.history.go (-1); } Asmeniškai man labiau patinka pastarasis metodas, nes man dažnai reikia pateikti keletą norimų atlikti „JavaScript“ funkcijų. Bet jūs galite naudoti bet kokį metodą, kuris jums labiausiai patinka ir kuris geriausiai tinka situacijai.
Toliau pateikiamas darbinis kliento pusės vaizdų žemėlapių su „JavaScript“ pavyzdys. Mygtukai rodo įspėjimo langelį, parodantį, kad „JavaScript: URL“ tikrai veikia. Taip pat veikia pirmyn ir atgal mygtukai, darant prielaidą, kad jūsų istorijos sąraše yra puslapių pirmyn ir atgal. Jei istorijos sąrašas tuščias (pavyzdžiui, dokumentą įkėlėte į naują langą), dabartinis puslapis lieka.
Kliento pusės vaizdo žemėlapio pavyzdys
„Client Side Image Map“ funkcijos „goBack“ () {įspėjimas („Atgal“); langas.istorija.go (-1); }
funkcija goForward () {alert ("Persiųsti"); window.history.go (1); }
function toc () {alert ("Turinys"); }
