Interneta puristi uzskata, ka globālais tīmeklis galvenokārt ir informācijas izplatīšanas līdzeklis. Liela daļa šīs informācijas ir teksta formā, kuru viegli var atveidot jebkurš tīmekļa pārlūks. Bet jau no Web sākuma dienām grafikai ir bijusi svarīga loma pamata teksta lapas uzlabošanā. Mūsdienās nav nekas neparasts redzēt tīmekļa vietnes, kas ir deviņdesmit procentu grafikas. Šīs vietnes, iespējams, neatbilst stingrai informācijas izplatīšanas koncepcijai, taču dažas no tām noteikti ir pievilcīgas.
Lielākā daļa no mums cenšas panākt līdzsvaru starp tekstu un grafiku savās tīmekļa lapās. Grafika palīdz uzlabot lapas izskatu un salasāmību. Tipiski grafikas izmantošanas veidi ir reklāmkarogi, sponsorējošu uzņēmumu reklāmas un krāsainas aizzīmes, lai izceltu svarīgus teksta fragmentus.
JavaScript skriptu valodu var izmantot, lai uzlabotu grafiku, ko ievietojat savās Web lapās. JavaScript var izmantot, lai dinamiski kontrolētu lapas grafisko saturu. Piemēram, jūs varat parādīt vienu savas lapas fonu no rīta un otru pēcpusdienā. Un naktī jūs varat izmantot zvaigžņu lauka fonu. Vai arī varat izmantot JavaScript, lai izveidotu displeju digitālajiem pulksteņiem, trāpījumu skaitītājiem, joslu diagrammām un citam.
Šī mēneša slejā ir detalizēti aprakstīti vairāki veidi, kā varat izmantot JavaScript un grafikas. Bet šajā diskusijā trūkst vienas ievērojamas tēmas: JavaScript izmantošana animācijai. Šis temats ir pelnījis savu sleju, drīzumā.
HTML attēla elementa izpratne
The elements ir visbiežāk izmantotais tags, lai attēlotu grafisko saturu HTML dokumentā (jaunākās HTML specifikācijas pievieno elementu, taču Netscape un lielākā daļa citu pārlūkprogrammu to vēl neatbalsta). Nezinātājiem pamata sintakse
tags ir:
kur "url" ir pareizi izveidots attēla faila URL. URL var būt absolūts vai relatīvs. Atcerieties, ka ne visas pārlūkprogrammas ir aprīkotas grafikas attēlošanai. Tāpēc tiem, kuriem ir apstrīdēts attēls, ieteicams attēlam pievienot "alternatīvu tekstu". Izmantojiet ALT atribūtu iekšpusē tagu, lai norādītu alternatīvu tekstu. Lūk, piemērs:
Attēli, kas izveidoti ar tagi tiek uzskatīti par “iekļautiem”, jo pret tiem izturas tāpat kā ar teksta rakstzīmēm. Tas nozīmē, ka jūs varat sakrustot attēlus ar tekstu, un pārlūks parūpēsies par to, lai viss notiktu pareizi.
Tomēr lielākā daļa attēlu ir garāki par tekstu, kas tos ieskauj. Lielākajai daļai pārlūkprogrammu parastā uzvedība ir tāda, ka attēla apakšdaļa atrodas vienā līmenī ar to ieskaujošā teksta apakšdaļu. Varat mainīt šo uzvedību, ja vēlaties citu līdzinājumu. Visizplatītākās izlīdzināšanas iespējas, kuras saprot visas pārlūkprogrammas, kurās tiek rādīti attēli, ir šādas:
- apakšdaļa - tekstu pielīdzina attēla apakšai. Tas ir noklusējums.
- vidus - pielīdzina tekstu attēla vidum.
- top - pielīdzina tekstu attēla augšdaļai.
Vienlaikus var izmantot tikai vienu līdzinājumu. Sintakse ir:
Pārlūkprogrammās attēli parasti tiek parādīti dabiskā izmērā. Piemēram, ja attēls ir 100 pikseļi līdz 100 pikseļi, tas ir tik liels, cik tas tiek renderēts pārlūkprogrammas ekrānā. Bet, izmantojot Netscape, varat mainīt attēla izmēru, ja vēlaties to mazāku vai lielāku, izmantojot atribūtus WIDTH un HEIGHT. Šo atribūtu priekšrocība ir tā, ka, lietojot, pārlūkprogramma izveido tukšu lodziņu attēlam, pēc tam visu lapu ielādējot, aizpilda lodziņu ar attēlu. Tas norāda lietotājiem, ka grafika ir paredzēta šajā vietā.
Norādot tikai platumu vai augstums proporcionāli maina attēla izmēru. Piemēram, norādot kvadrātveida attēla izmērus līdz 100 pikseļu augstumam un platumam. Ja sākotnējais attēls nav kvadrātveida, tas tiek izmērīts relatīvā proporcijā. Piemēram, ja sākotnējā attēla platums ir 400 pikseļi un augstums 100 pikseļu, platuma maiņa uz 100 pikseļiem samazina attēlu līdz 25 pikseļu augstumam.
- Norādot gan platumu un augstums ļauj jums mainīt attēla proporciju, kā vien vēlaties. Piemēram, jūs varat pārveidot šo 400x100 pikseļu attēlu uz 120x120, 75x90 vai jebkuru citu.
Piemēram:
Uzmanību: Ja to apvieno ar JavaScript, jums tas jādara vienmēr norādiet atribūtus HEIGHT un WIDTH
Attēlu apvienošana ar JavaScript
JavaScript var izmantot, lai uzlabotu HTML dokumentos izmantotos attēlus. Piemēram, jūs varat izmantot JavaScript, lai dinamiski izveidotu lapu, izmantojot attēlus, kas atlasīti ar nosacītu testa izteiksmi, piemēram, dienas laiku.
Faktiski JavaScript digitālā pulksteņa lietojumprogramma, kas izmanto JavaScript un GIF attēlu sortimentu, ir viena no populārākajām tīmeklī. Clock.html piemērs izmanto JavaScript, lai parādītu pašreizējo laiku, izmantojot lielus zaļus LED ciparus. Katrs cipars ir individuāls GIF, ko JavaScript savijis kopā, lai veidotu digitālā pulksteņa seju.
Es izmantoju Russ Walsh sniegtos ciparu GIF; Russ laipni atļauj brīvi izmantot savus GIF attēlus Web lapās, ja vien tiek piešķirts pienācīgs kredīts. Pulkstenim var izmantot visus vēlamos ciparus, taču katram ciparam ir jānorāda atsevišķs GIF fails, bet kols un AM / pm - atsevišķi faili. Mainiet clock.html kodu, lai norādītu ciparu failus, kurus vēlaties izmantot.
Piezīme: Ir svarīgi, lai jūs norādītu absolūts Izmantoto attēlu URL. Pretējā gadījumā Netscape grafiku nerādīs. Pulkstenī clock.html tiek izmantota funkcija (pathOnly), lai izvilktu pašreizējo dokumenta ceļu. Tāpēc skripts paredz attēlus atrast tajā pašā ceļā kā dokuments. Varat arī kodēt absolūto URL, ja attēlus ievietojat citur, vai arī dokumenta sākumā varat izmantot tagu, lai skaidri norādītu Netscape pamata URL, kuru vēlaties izmantot.JavaScript digitālais pulkstenis
JavaScript digitālais pulkstenis var Temp; setClock (); funkcija setClock () {var OpenImg = '
'Temp = "" now = new Date (); var CurHour = tagad.getHours (); var CurMinute = now.getMinutes (); tagad = nulle; ja (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } else Ampm = "esmu"; ja (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute cits CurMinute = "" + CurMinute
CurHour = "" + CurHour; par (Count = 0; Count 'par (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 pulkstenis
Pašreizējais laiks ir: document.write (Temp);
JavaScript lietošana ar klienta puses attēlu kartēm
Ja jums ir paveicies kontrolēt serveri, kurā atrodas jūsu publicētās tīmekļa lapas, jūs, iespējams, esat izdomājis servera puses attēlu kartes. Tie ir attēli, kas "sadalīti" mazākos gabalos; kad lietotājs noklikšķina uz katra gabala, serveris reaģē uz citu darbību.
Servera puses attēlu karšu negatīvie aspekti ir tādi, ka klikšķu pieprasījumu apstrādei ir nepieciešama CGI programma, kas darbojas serverī. Ne visiem ir piekļuve CGI. Klienta puses attēlu kartes to maina: Pārlūkprogrammā ir iebūvēts attēla sadalīšanas un lietotāja novirzīšanas uz pareizo saiti pamatojums, pamatojoties uz noklikšķinātā attēla apgabalu. Netscape Navigator (versija 2.0 un jaunāka versija) ir viena no daudzajām pārlūkprogrammām, kas tagad atbalsta šo standartu.
Netscape šo procesu paver soli tālāk, ļaujot integrēt klienta puses attēlu kartes ar JavaScript. Parastajā klienta puses attēlu kartē jūs aprobežojaties tikai ar saitēm uz citu lapu. Ja vēlaties, varat “sasaistīt” ar JavaScript funkciju un piešķirt savu attēlu kartēm vēl lielāku inteliģenci. Piemēram, jūs varat izveidot vadības paneli, kas lietotājiem ļauj veiksmīgi noklikšķināt uz attēla pogas tikai tad, ja ir sniegta kāda informācija - teiksim, lietotāja vārds.
Klienta puses attēlu kartes anatomija
Lai izveidotu klienta puses attēlu kartes, tiek izmantoti divi jauni HTML tagi. Tie ir tags, kas nosaka kartes struktūru, un viens vai vairāki tagi, kas nosaka attēla apgabalus, uz kuriem var noklikšķināt. Lai izveidotu attēlu karti, definējiet tagu un piešķiriet kartēšanai nosaukumu. Sintakse ir:
Kartē lielākoties var izmantot jebkuru nosaukumu, taču tajā jāietver tikai alfabētiskās un ciparu rakstzīmes. Izņēmums ir pasvītrojums, taču pirmajai rakstzīmei neizmantojiet pasvītru. Pēc tam definējiet vienu vai vairākus tagus, kas nosaka attēla apgabalus. Tag aizņem sintaksi:
Pēc pēdējā taga izmantojiet tagu, lai apzīmētu kartēšanas beigas.
Pēdējais vienums ir attēls, kuru vēlaties izmantot, atsaucoties uz iepriekš definēto apgabala karti. Izmantojiet standartu tagu ar jaunu USEMAP atribūtu. Atribūtam USEMAP norādiet kartes nosaukumu. Lūk, piemērs:
Šajā kartē tiek izmantots attēls ar nosaukumu control.gif. The tags atsaucas uz kartes nosaukumu, kas ir #control (ņemiet vērā hash pirms nosaukuma). Citi ar
tagam nav apmales (BORDER = 0), kā arī attēla platumam un augstumam. Kad jūsu lietotāji noklikšķina uz bultiņas atpakaļ (kas ir pirmais definētais apgabals), viņi tiek nosūtīti uz index.html lapu. Un otrādi, ja viņi noklikšķina uz satura pogas (otrais definētais apgabals), viņi tiek novirzīti uz lapu ar nosaukumu toc.html. Un, ja viņi noklikšķina uz bultiņas uz priekšu, viņi tiek novirzīti uz lapu ar nosaukumu backpage.html.
JavaScript pievienošana attēlu kartes vadībai
JavaScript var izmantot, lai paplašinātu klienta puses attēlu karšu funkcionalitāti. Lai nodrošinātu lielāku elastību, tagā norādiet HREF JavaScript funkcijas nosaukumu. Tā vietā, lai pārietu uz kādu lapu, tiek izpildīts jūsu JavaScript kods, kurā varat darīt visu, ko vēlaties. Triks: URL izmantojiet protokolu JavaScript: un sekojiet tam ar tās funkcijas nosaukumu, kuru vēlaties izmantot.
Piemēram, pieņemsim, ka vēlaties, lai lietotāji, noklikšķinot uz bultiņas atpakaļ, vēstures sarakstā atgrieztos tikai vienā lappusē. Lai pārlūkotu vienu lapu lietotāja vēstures sarakstā, varat izmantot metodi window.history.go (-1). Jūs varat vai nu nodrošināt visu šo funkciju pēc JavaScript: protokola, vai izsaukt lietotāja definētu funkciju, kurā ir šī instrukcija. Šeit ir abas metodes:
vai ...
... un citur dokumentā:
funkcija goBack () {window.history.go (-1); } Personīgi es dodu priekšroku pēdējai metodei, jo man bieži ir jānodrošina vairākas JavaScript funkcijas, kuras es vēlos veikt. Bet jūs varat izmantot jebkuru metodi, kas jums vislabāk patīk un kura vislabāk atbilst situācijai.
Tālāk ir sniegts piemērs klienta puses attēlu karšu izmantošanai ar JavaScript. Pogas parāda brīdinājuma lodziņu, lai parādītu, ka JavaScript: URL patiešām darbojas. Darbojas arī uz priekšu un atpakaļ pogas - pieņemot, ka jūsu vēstures sarakstā ir lapas uz priekšu un atpakaļ. Ja vēstures saraksts ir tukšs (piemēram, dokumentu esat ielādējis jaunā logā), pašreizējā lapa paliek.
Klienta puses attēlu kartes piemērs
Klienta puses attēlu kartes funkcijas goBack () {alert ("Back"); logs.vēsture.go (-1); }
funkcija goForward () {alert ("Pārsūtīt"); window.history.go (1); }
function toc () {alert ("Satura rādītājs"); }
