Internetpurister betragter World Wide Web primært som et middel til formidling af information. Meget af denne information er i tekstform, som let kan gengives af enhver webbrowser. Men selv fra de første dage på Internettet har grafik spillet en vigtig rolle i forbedringen af ​​den grundlæggende tekstside. I disse dage er det ikke usædvanligt at se websteder, der er halvfems procent grafik. Disse websteder er muligvis ikke i overensstemmelse med det strenge koncept med formidling af information, men nogle af dem er bestemt attraktive.

De fleste af os stræber efter en balance mellem tekst og grafik på vores websider. Grafikken tjener til at forbedre sidens udseende og læsbarhed. Typiske anvendelser til grafik inkluderer bannere, annoncer fra sponsorerende virksomheder og farvede kugler for at fremhæve vigtige stykker tekst.

JavaScript-scriptingsproget kan bruges til at forbedre den grafik, du lægger på dine websider. JavaScript kan bruges til dynamisk kontrol af det grafiske indhold på siden. For eksempel kan du få vist en baggrund til din side om morgenen og en anden om eftermiddagen. Og om natten kan du bruge en stjernefeltbaggrund. Eller du kan bruge JavaScript til at oprette displayet til digitale ure, hittællere, søjlediagrammer og meget mere.

Denne måneds kolonne beskriver flere måder, du kan bruge JavaScript og grafik på. Men et bemærkelsesværdigt emne mangler i denne diskussion: Brug af JavaScript til animation. Dette emne fortjener sin egen kolonne, der snart kommer.

Forståelse af HTML-billedelementet

Det element er det mest anvendte tag til at repræsentere grafisk indhold i et HTML-dokument (de nyeste HTML-specifikationer tilføjer et element, men det understøttes endnu ikke af Netscape og de fleste andre browsere). For de uindviede er syntaksen for det grundlæggende tag er:

hvor "url" er en korrekt konstrueret URL til billedfilen. URL'en kan være absolut eller relativ. Husk, at ikke alle browsere er udstyret til at vise grafik. Derfor anbefales det at medtage "alternativ tekst" til billedet for dem, der er billedudfordret. Brug ALT-attributten inde i tag for at angive alternativ tekst. Her er et eksempel:

Billeder oprettet med tag betragtes som "inline", fordi de behandles ligesom teksttegn. Det betyder, at du kan sprede billeder med tekst, og browseren sørger for at sikre, at alt flyder korrekt.

De fleste billeder er dog højere end teksten, der omgiver dem. Den normale adfærd for de fleste browsere er at placere bunden af ​​billedet flugt med bunden af ​​teksten, der omgiver det. Du kan ændre denne adfærd, hvis du vil have en anden justering. De mest almindelige justeringsvalg, forstået af alle browsere, der viser billeder, er:

• bund - Justerer teksten til bunden af ​​billedet. Dette er standard.
• midt - Justerer teksten til midten af ​​billedet.
• top - Justerer teksten til toppen af ​​billedet.

Du må kun bruge en justering ad gangen. Syntaksen er:

Browsere viser normalt billeder i deres "naturlige størrelse." Hvis et billede f.eks. Er 100 pixels x 100 pixels, så er det, hvor stort det er, når det gengives på browserens skærm. Men med Netscape kan du ændre billedets størrelse, hvis du vil have det mindre eller større ved hjælp af attributterne WIDTH og HEIGHT. En fordel ved disse attributter er, at browseren, når den bruges, opretter en tom boks til billedet og derefter udfylder feltet med billedet, når hele siden indlæses. Dette antyder brugere, at der forventes en grafik på det sted.

• Angiver kun bredden eller højde ændrer billedets størrelse i forhold. For eksempel angiver størrelsen af ​​et kvadratisk billede til en højde og bredde på 100 pixels. Hvis det originale billede ikke er firkantet, dimensioneres det i forholdsmæssigt forhold. For eksempel, hvis det originale billede er 400 pixels bredt med 100 pixels højt, ændres bredden til 100 pixels billedet til 25 pixels højt.

• Angivelse af begge bredder og højde giver dig mulighed for at ændre billedets andel på den måde, du vil. For eksempel kan du omdanne det 400 x 100 pixel billede til 120 x 120, 75 x 90 eller noget andet.

For eksempel:

Advarsel: Når det kombineres med JavaScript, skal du altid give attributterne HEIGHT og WIDTH til tags. Ellers kan du få inkonsekvente resultater og / eller gå ned! Denne advarsel gælder for enhver tag, der vises i det samme dokument, der indeholder JavaScript-kode.

Kombination af billeder med JavaScript

JavaScript kan bruges til at forbedre billeder, der bruges i HTML-dokumenter. For eksempel kan du bruge JavaScript til dynamisk at oprette en side ved hjælp af billeder valgt af et betinget testudtryk, såsom tidspunktet på dagen.

Faktisk er JavaScript Digital Clock-applikationen, der bruger JavaScript og et udvalg af GIF-billeder, en af ​​de mest populære på Internettet. Clock.html-eksemplet bruger JavaScript til at vise den aktuelle tid ved hjælp af store grønne LED-cifre. Hvert ciffer er en individuel GIF, trukket sammen af ​​JavaScript for at danne ansigtet på et digitalt ur.

Jeg brugte cifre GIF'er leveret af Russ Walsh; Russ tillader venligst, at hans GIF'er kan bruges frit på websider, så længe der gives korrekt kredit. Du kan bruge de cifre, du ønsker til dit ur, men du skal angive en separat GIF-fil til hvert tal og separate filer hver til kolon- og am / pm-indikatorerne. Skift uret.html-koden for at henvise til de cifre filer, du ønsker at bruge.

Bemærk: Det er vigtigt, at du giver absolut URL til de billeder, du bruger. Ellers viser Netscape ikke grafikken. Eksemplet clock.html bruger en funktion (pathOnly) til at udtrække den aktuelle sti til dokumentet. Scriptet forventer derfor at finde billederne i samme sti som dokumentet. Alternativt kan du hårdkode den absolutte URL, hvis du placerer billederne et andet sted, eller du kan bruge mærket i starten af ​​dokumentet til eksplicit at fortælle Netscape den grundlæggende URL, du vil bruge.

JavaScript digitalt ur

  JavaScript Digital ur var Temp; setClock (); funktion setClock () {var OpenImg = ''Temp = "" nu = ny dato (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); nu = null; hvis (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } andet Ampm = "am"; hvis (CurHour == 0) CurHour = "12" hvis (CurMinute <10) CurMinute = "0" + CurMinute ellers 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} 
funktionsstiOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); } 
JavaScript-uret
 Den aktuelle tid er: document.write (Temp); 

Brug af JavaScript med klientsides billedkort

Hvis du er heldig nok til at have kontrol over serveren, der indeholder dine offentliggjorte websider, har du sandsynligvis dablet med billedkort på serversiden. Dette er billeder, der er "dissekeret" i mindre stykker; når brugeren klikker på hvert stykke, reagerer serveren på en anden handling.

Ulempen ved serversides billedkort er, at du har brug for et CGI-program, der kører på serveren for at håndtere klikanmodningerne. Ikke alle har CGI-adgang. Billedkort på klientsiden ændrer det: "Intelligensen" til at dissekere billedet og lede brugeren til det rette link - baseret på det område af billedet, der blev klikket på - er indbygget i browseren. Netscape Navigator (version 2.0 og nyere) er en af ​​mange browsere, der nu understøtter denne standard.

Netscape tager processen et skridt videre, men lader dig integrere billedkort på klientsiden med JavaScript. På et almindeligt billedkort på klientsiden er du kun begrænset til at linke til en anden side. Hvis du ønsker det, kan du "linke" til en JavaScript-funktion og give dine billedkort endnu mere intelligens. For eksempel kan du oprette et kontrolpanel, der kun lader brugere med succes klikke på en billedknap, hvis der er leveret noget information - sig et brugernavn -.

Anatomien på et billedkort på klientsiden

To nye HTML-tags bruges til at oprette billedkort på klientsiden. De er tagget, der definerer kortstrukturen og et eller flere tags, der definerer de klikbare områder i billedet. For at oprette billedkortet skal du definere et tag og give kortlægningen et navn. Syntaksen er:

Du kan mest bruge ethvert navn på kortet, men det skal kun indeholde alfabetiske og numeriske tegn. Undtagelsen er understregning, men undgå at bruge understregning til det første tegn. Definer derefter et eller flere tags, der definerer områderne i dit billede. Tagget tager syntaksen:

Efter det sidste tag skal du bruge tagget til at betegne slutningen af ​​kortlægningen.

Det sidste element er det billede, du vil bruge, med en henvisning til det arealkort, du tidligere har defineret. Brug standarden tag med en ny USEMAP-attribut. Angiv navnet på kortet for USEMAP-attributten. Her er et eksempel:

Dette kort bruger et billede med navnet control.gif. Det tag henviser til kortnavnet, som er #control (bemærk hashen før navnet). Andre attributter leveret med tag er ingen kant (BORDER = 0) og bredden og højden af ​​billedet. Når dine brugere klikker på tilbagepilen (som er det første definerede område), sendes de til siden index.html. Omvendt, hvis de klikker på knappen "Indhold" (det andet område defineret), føres de til en side kaldet toc.html. Og hvis de klikker på pilen fremad, føres de til en side kaldet backpage.html.

Tilføjelse af JavaScript til kontrol af billedkort

JavaScript kan bruges til at udvide funktionaliteten af ​​billedkort på klientsiden. For ekstra fleksibilitet skal du angive navnet på en JavaScript-funktion til HREF i koden. I stedet for at springe til en side udføres din JavaScript-kode, hvor du kan gøre hvad du vil. Tricket: Brug JavaScript: protokollen til URL'en, og følg den med navnet på den funktion, du ønsker at bruge.

Antag for eksempel, at du ønsker, at brugerne kun skal gå én side tilbage i historiklisten, når de klikker på tilbagepilen. Du kan bruge metoden window.history.go (-1) til at springe en side tilbage i brugerens historikliste. Du kan enten levere hele denne funktion efter JavaScript: -protokollen eller ringe til en brugerdefineret funktion, der indeholder denne instruktion. Her er begge metoder:

eller ...

... og andre steder i dokumentet:

 funktion goBack () {window.history.go (-1); } 

Personligt foretrækker jeg sidstnævnte metode, fordi jeg ofte har brug for at levere et antal JavaScript-funktioner, som jeg vil have udført. Men du kan bruge den metode, du bedst kan lide, og som bedst passer til situationen.

Følgende er et fungerende eksempel på brug af klientsides billedkort med JavaScript. Knapperne viser en advarselsboks for at vise dig, at JavaScript: URL faktisk fungerer. Knapperne frem og tilbage fungerer også - forudsat at du har sider frem og tilbage på din historikliste. Hvis historiklisten er tom (for eksempel har du indlæst dokumentet i et nyt vindue), forbliver den aktuelle side.

Eksempel på billedkort på klientsiden

  Client Side Image Map Eksempel på funktion goBack () {alarm ("Tilbage"); window.history.go (-1); } 
funktion goForward () {alarm ("Videresend"); window.history.go (1); } 
funktion toc () {alarm ("Indholdsfortegnelse"); }