Internett-purister anser World Wide Web først og fremst som et middel for formidling av informasjon. Mye av denne informasjonen er i tekstform, som enkelt kan gjengis av hvilken som helst nettleser. Men allerede fra begynnelsen av nettet har grafikk spilt en viktig rolle i å forbedre den grunnleggende tekstsiden. I disse dager er det ikke uvanlig å se nettsteder med nitti prosent grafikk. Disse nettstedene samsvarer kanskje ikke med det strenge konseptet med formidling av informasjon, men noen av dem er absolutt attraktive.
De fleste av oss tilstreber en balanse mellom tekst og grafikk på websidene våre. Grafikken forbedrer utseendet og lesbarheten til siden. Typiske bruksområder for grafikk inkluderer bannere, annonser fra sponsingselskaper og fargede kuler for å markere viktige tekststykker.
JavaScript-skriptspråket kan brukes til å forbedre grafikken du legger på websidene dine. JavaScript kan brukes til å dynamisk kontrollere det grafiske innholdet på siden. For eksempel kan du vise en bakgrunn for siden din om morgenen og en annen om ettermiddagen. Og om natten kan du bruke en stjernefeltbakgrunn. Eller du kan bruke JavaScript til å lage skjermen for digitale klokker, treffteller, stolpediagrammer og mer.
Denne månedens kolonne beskriver flere måter du kan bruke JavaScript og grafikk på. Men et bemerkelsesverdig emne mangler i denne diskusjonen: å bruke JavaScript til animasjon. Det emnet fortjener sin egen kolonne, kommer snart.
Forstå HTML-bildeelementet
De element er den mest brukte koden for å representere grafisk innhold i et HTML-dokument (de nyeste HTML-spesifikasjonene legger til et element, men det støttes foreløpig ikke av Netscape og de fleste andre nettlesere). For uinnvidde, syntaksen til det grunnleggende
taggen er:
der "url" er en riktig konstruert URL for bildefilen. URL-en kan være absolutt eller relativ. Husk at ikke alle nettlesere er utstyrt for å vise grafikk. Derfor anbefales det å ta med "alternativ tekst" for bildet for de som er image-utfordret. Bruk ALT-attributtet inne i tag for å spesifisere alternativ tekst. Her er et eksempel:
Bilder laget med tag betraktes som "innebygd" fordi de behandles akkurat som teksttegn. Det betyr at du kan blande bilder med tekst, og nettleseren vil sørge for at alt flyter ordentlig.
De fleste bilder er imidlertid høyere enn teksten som omgir dem. Den normale oppførselen til de fleste nettlesere er å plassere bunnen av bildet i tråd med bunnen av teksten som omgir det. Du kan endre denne oppførselen hvis du vil ha en annen justering. De vanligste justeringsvalgene, forstått av alle nettlesere som viser bilder, er:
- nederst - Justerer teksten til bunnen av bildet. Dette er standard.
- midt - Justerer teksten til midten av bildet.
- topp - Justerer teksten til toppen av bildet.
Du kan bare bruke en justering om gangen. Syntaksen er:
Nettlesere viser vanligvis bilder i sin "naturlige størrelse." Hvis et bilde for eksempel er 100 piksler på 100 piksler, så er det hvor stort det er når det gjengis på nettleserens skjerm. Men med Netscape kan du endre størrelsen på bildet hvis du vil ha det mindre eller større ved å bruke attributtene WIDTH og HEIGHT. En fordel med disse attributtene er at nettleseren, når den brukes, oppretter en tom rute for bildet, og deretter fyller ruten med bildet når hele siden lastes inn. Dette viser brukerne at det forventes en grafikk på det stedet.
Spesifiserer bare bredden eller høyde endrer størrelsen på bildet i proporsjon. For eksempel angir du størrelser på et kvadratisk bilde til en høyde og bredde på 100 piksler. Hvis originalbildet ikke er kvadratisk, er det størrelsen i forholdsmessig proporsjon. For eksempel, hvis det originale bildet er 400 piksler bredt og 100 piksler høyt, endres bredden til 100 piksler bildet til 25 piksler høyt.
- Spesifiserer både bredden og høyde lar deg endre andelen av bildet slik du vil. For eksempel kan du forvandle det 400 x 100 pikslene bildet til 120 x 120, 75 x 90 eller noe annet.
For eksempel:
Forsiktighet: Når du kombinerer det med JavaScript, bør du alltid oppgi HEIGHT og WIDTH attributtene for
Kombinere bilder med JavaScript
JavaScript kan brukes til å forbedre bilder som brukes i HTML-dokumenter. For eksempel kan du bruke JavaScript til å opprette en side dynamisk ved hjelp av bilder valgt av et betinget testuttrykk, for eksempel tidspunktet på dagen.
Faktisk er JavaScript digital klokkeapplikasjon, som bruker JavaScript og et utvalg GIF-bilder, en av de mest populære på nettet. Clock.html-eksemplet bruker JavaScript for å vise gjeldende tid ved å bruke store grønne LED-sifre. Hvert siffer er en individuell GIF, strammet sammen av JavaScript for å danne ansiktet til en digital klokke.
Jeg brukte siffer-GIF-er levert av Russ Walsh; Russ tillater vennlig at GIF-er kan brukes fritt på websider, så lenge riktig kreditt er gitt. Du kan bruke alle sifrene du ønsker for klokken din, men du må oppgi en egen GIF-fil for hvert tall og separate filer hver for kolon- og am / pm-indikatorene. Endre clock.html-koden for å referere til sifferfilene du vil bruke.
Merk: Det er viktig at du oppgir absolutt URL til bildene du bruker. Ellers vil ikke Netscape vise grafikken. Clock.html-eksemplet bruker en funksjon (pathOnly) for å trekke ut den nåværende banen til dokumentet. Manuset forventer derfor å finne bildene i samme bane som dokumentet. Alternativt kan du hardkode den absolutte URL-en hvis du plasserer bildene et annet sted, eller du kan bruke taggen i begynnelsen av dokumentet for å eksplisitt fortelle Netscape basen URL du vil bruke.JavaScript digital klokke
JavaScript Digital Clock var Temp; setClock (); funksjon setClock () {var OpenImg = '
'Temp = "" nå = ny dato (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); nå = null; hvis (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } annet Ampm = "am"; hvis (CurHour == 0) CurHour = "12" hvis (CurMinute <10) CurMinute = "0" + CurMinute annet 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}
funksjonsstiOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }
JavaScript-klokken
Nåværende tid er: document.write (Temp);
Bruke JavaScript med bildekart på klientsiden
Hvis du er heldig nok til å ha kontroll over serveren som inneholder dine publiserte websider, har du sannsynligvis dablet med bildekart på serversiden. Dette er bilder som er "dissekert" i mindre biter; når brukeren klikker på hver del, reagerer serveren på en annen handling.
Ulempen med bildekart på serversiden er at du trenger et CGI-program som kjører på serveren for å håndtere klikkforespørslene. Ikke alle har CGI-tilgang. Bildekart på klientsiden endrer det: "Intelligensen" for å dissekere bildet og lede brukeren til riktig lenke - basert på området av bildet som ble klikket på - er innebygd i nettleseren. Netscape Navigator (versjon 2.0 og nyere) er en av mange nettlesere som nå støtter denne standarden.
Netscape tar prosessen et skritt videre, men lar deg integrere bildekart på klientsiden med JavaScript. I et vanlig bildekart på klientsiden er du bare begrenset til å lenke til en annen side. Hvis du ønsker det, kan du "lenke" til en JavaScript-funksjon og gi bildekartene dine enda mer intelligens. For eksempel kan du opprette et kontrollpanel som bare lar brukere klikke på en bildeknapp hvis det er gitt informasjon - si et brukernavn -.
Anatomien til et bildekart på klientsiden
To nye HTML-koder brukes til å lage bildekart på klientsiden. De er taggen, som definerer kartstrukturen, og en eller flere tagger som definerer de klikkbare områdene i bildet. For å lage bildekartet, definer en tag og gi kartleggingen et navn. Syntaksen er:
Du kan bruke mest hvilket som helst navn på kartet, men det skal bare inneholde alfabetiske og numeriske tegn. Unntaket er understreking, men unngå å bruke understreking for første karakter. Deretter definerer du en eller flere tagger som definerer områdene i bildet ditt. Taggen tar syntaksen:
Etter den siste koden, bruk koden for å betegne slutten på kartleggingen.
Det siste elementet er bildet du vil bruke, med en referanse til områdekartet du tidligere har definert. Bruk standarden tag, med et nytt USEMAP-attributt. For USEMAP-attributtet, oppgi navnet på kartet. Her er et eksempel:
Dette kartet bruker et bilde som heter control.gif. De tag refererer til kartnavnet, som er #control (merk hashen før navnet). Andre attributter følger med
tag er ingen kant (BORDER = 0), og bredden og høyden på bildet. Når brukerne klikker på bakoverpilen (som er det første området som er definert), blir de sendt til index.html-siden. Omvendt, hvis de klikker på innholdsknappen (det andre definerte området), blir de ført til en side som heter toc.html. Og hvis de klikker på fremoverpilen, blir de ført til en side som heter backpage.html.
Legge til JavaScript i bildekartkontroll
JavaScript kan brukes til å utvide funksjonaliteten til bildekart på klientsiden. For ekstra fleksibilitet, oppgi navnet på en JavaScript-funksjon for HREF i koden. I stedet for å hoppe til en side, blir JavaScript-koden din utført der du kan gjøre hva du vil. Trikset: Bruk JavaScript: protokollen for URL, og følg den med navnet på funksjonen du ønsker å bruke.
Anta for eksempel at du vil at brukerne bare skal gå tilbake en side i historikklisten når de klikker på bakpilen. Du kan bruke window.history.go (-1) -metoden til å hoppe tilbake en side i brukerens historikkliste. Du kan enten tilby hele denne funksjonen etter JavaScript: protokollen, eller ringe en brukerdefinert funksjon som inneholder denne instruksjonen. Her er begge metodene:
eller ...
... og andre steder i dokumentet:
funksjon goBack () {window.history.go (-1); } Personlig foretrekker jeg sistnevnte metode, fordi jeg ofte trenger å oppgi en rekke JavaScript-funksjoner som jeg ønsker å utføre. Men du kan bruke hvilken metode du liker best og som passer best i situasjonen.
Følgende er et fungerende eksempel på bruk av bildekart på klientsiden med JavaScript. Knappene viser en varselboks for å vise deg at JavaScript: URL faktisk fungerer. Fremover- og bakknappene fungerer også - forutsatt at du har sider fremover og bakover i historikklisten din. Hvis historikklisten er tom (for eksempel har du lastet dokumentet i et nytt vindu), forblir den gjeldende siden.
Eksempel på bildekart på klientsiden
Bildekart for klientsiden Eksempel på funksjon goBack () {alert ("Tilbake"); window.history.go (-1); }
funksjon goForward () {alert ("Forward"); window.history.go (1); }
funksjon toc () {alert ("Innholdsfortegnelse"); }
