Korištenje JavaScript-a i grafike

Internet puristi svjetsku mrežu smatraju prvenstveno sredstvom za širenje informacija. Većina tih podataka nalazi se u tekstualnom obliku, koji svaki web preglednik može lako prikazati. Ali čak i od prvih dana Weba, grafika je igrala važnu ulogu u poboljšanju osnovne stranice teksta. Ovih dana nije neobično vidjeti web stranice koje čine devedeset posto grafike. Te web stranice možda nisu u skladu sa strogim konceptom širenja informacija, ali neke od njih svakako jesu atraktivne.

Većina nas teži ravnoteži između teksta i grafike na našim web stranicama. Grafika služi poboljšanju izgleda i čitljivosti stranice. Tipična uporaba grafike uključuje natpise, oglase tvrtki sponzora i metke u boji za isticanje važnih dijelova teksta.

JavaScript skriptni jezik može se koristiti za poboljšanje grafike koju stavljate na svoje web stranice. JavaScript se može koristiti za dinamičko upravljanje grafičkim sadržajem stranice. Na primjer, možete prikazati jednu pozadinu stranice ujutro, a drugu popodne. A noću možete koristiti pozadinu zvjezdanog polja. Ili možete upotrijebiti JavaScript za izradu zaslona za digitalne satove, brojače pogotka, trakaste grafikone i još mnogo toga.

Ovomjesečna kolona opisuje nekoliko načina na koje možete koristiti JavaScript i grafiku. Ali u ovoj raspravi nedostaje jedna značajna tema: korištenje JavaScript-a za animaciju. Ta tema zaslužuje vlastitu kolumnu, koja dolazi uskoro.

Razumijevanje elementa HTML slike

Element je najčešće korištena oznaka za predstavljanje grafičkog sadržaja u HTML dokument (najnovije HTML specifikacije dodati element, ali to još nije podržan od strane Netscape i većini drugih preglednika). Za neupućene, sintaksa osnovne oznake je:

gdje je "url" ispravno konstruirani URL za slikovnu datoteku. URL može biti apsolutni ili relativni. Imajte na umu da nisu svi preglednici opremljeni za prikaz grafike. Stoga je poželjno uključiti "zamjenski tekst" za sliku za one koji imaju izazove sa slikom. Upotrijebite atribut ALT unutar oznake da odredite zamjenski tekst. Evo primjera:

Slike stvorene s oznakom smatraju se "inline" jer se s njima postupa baš kao s tekstualnim znakovima. To znači da možete prošarati slike tekstom, a preglednik će se pobrinuti da sve teče pravilno.

Većina je slika ipak viša od teksta koji ih okružuje. Uobičajeno ponašanje većine preglednika je da dno slike poravna s dnom teksta koji je okružuje. Ovo ponašanje možete promijeniti ako želite drugačije poravnanje. Najčešći izbori za poravnanje, koji razumiju svi preglednici koji prikazuju slike, su:

  • dno - Poravnava tekst s dnom slike. Ovo je zadano.
  • sredina - Poravnava tekst sa sredinom slike.
  • vrh - Poravnava tekst s vrhom slike.

Možete koristiti samo jedno poravnanje odjednom. Sintaksa je:

Preglednici obično prikazuju slike u "prirodnoj veličini". Na primjer, ako je slika 100 piksela sa 100 piksela, toliko je velika kad se prikazuje na zaslonu preglednika. Ali s Netscapeom možete promijeniti veličinu slike ako je želite manjom ili većom pomoću atributa WIDTH i HEIGHT. Prednost ovih atributa je u tome što, kada se koristi, preglednik stvara prazan okvir za sliku, a zatim ispunjava okvir slikom kako se učitava cijela stranica. To nagovještava korisnike da se na tom mjestu očekuje grafika.

  • Određivanjem samo širine ili visine proporcionalno se mijenja veličina slike. Na primjer, određivanjem veličina kvadratne slike do visine i širine od 100 piksela. Ako izvorna slika nije kvadratna, veličina je u relativnom omjeru. Na primjer, ako je izvorna slika široka 400 piksela i visoka 100 piksela, promjena širine na 100 piksela smanjuje sliku na 25 piksela.

  • Određivanje širine i visine omogućuje vam promjenu udjela slike na bilo koji način. Na primjer, tu sliku od 400 sa 100 piksela možete transformirati u 120 sa 120, 75 sa 90 ili bilo što drugo.

Na primjer:

Oprez : U kombinaciji s JavaScriptom uvijek trebate navesti atribute HEIGHT and WIDTH za oznake. U suprotnom, možete dobiti neusklađene rezultate i / ili pad! Ovaj se oprez odnosi na bilo koju oznaku koja se pojavljuje u istom dokumentu koji sadrži JavaScript kôd.

Kombiniranje slika s JavaScriptom

JavaScript se može koristiti za poboljšanje slika koje se koriste u HTML dokumentima. Na primjer, možete koristiti JavaScript za dinamičko stvaranje stranice pomoću slika odabranih uvjetnim izrazom testa, kao što je doba dana.

U stvari, aplikacija za digitalni sat JavaScript, koja koristi JavaScript i niz GIF slika, jedna je od najpopularnijih na webu. Primjer clock.html koristi JavaScript za prikaz trenutnog vremena, koristeći velike zelene LED znamenke. Svaka je znamenka pojedinačni GIF, koji JavaScript spaja u obliku lica digitalnog sata.

Koristio sam digitalne GIF-ove koje je pružio Russ Walsh; Russ ljubazno dopušta da se njegovi GIF-ovi mogu slobodno koristiti na web stranicama, sve dok se daju odgovarajuće zasluge. Za svoj sat možete koristiti bilo koju znamenku, ali morate osigurati zasebnu GIF datoteku za svaki broj i zasebne datoteke za indikatore dvotačke i am / pm. Promijenite kod clock.html tako da upućuje na datoteke s znamenkama koje želite koristiti.

Napomena : Važno je daslikama koje upotrebljavatenavedete apsolutni URL. U suprotnom Netscape neće prikazati grafiku. Primjer clock.html koristi funkciju (pathOnly) za izdvajanje trenutne staze dokumenta. Skripta stoga očekuje da će slike pronaći na istom putu kao i dokument. Alternativno možete apsolutno kodirati apsolutni URL ako slike postavite na neko drugo mjesto ili možete koristiti oznaku na početku dokumenta kako biste Netscapeu izričito rekli osnovni URL koji želite koristiti.

JavaScript digitalni sat

JavaScript Digital Clock var Temp; setClock(); function setClock() { var OpenImg = '' Temp = "" now = new Date(); var CurHour = now.getHours(); var CurMinute = now.getMinutes(); now = null; if (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 }

function pathOnly (InString) { LastSlash=InString.lastIndexOf ('/', InString.length-1) OutString=InString.substring (0, LastSlash+1) return (OutString); }

The JavaScript Clock

The current time is: document.write(Temp);

Using JavaScript with client-side image maps

If you're lucky enough to have control over the server that contains your published Web pages, you've probably dabbled with server-side image maps. These are images that have been "dissected" into smaller chunks; as the user clicks on each chunk, the server responds to a different action.

The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.

Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.

The anatomy of a client-side image map

Two new HTML tags are used to create client-side image maps. They are the tag, which defines the map structure, and one or more tags, which define the clickable areas within the image. To create the image map, define a tag and give the mapping a name. The syntax is:


  

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more tags that define the areas of your image. The tag takes the syntax:


  

After the last tag, use the tag to denote the end of the mapping.

The last item is the image you want to use, with a reference to the area map you've previously defined. Use the standard tag, with a new USEMAP attribute. For the USEMAP attribute, provide the name of the map. Here's an example:

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

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

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

funkcija toc () {upozorenje ("Sadržaj"); }