Internet-puristit pitävät Internet-verkkoa ensisijaisesti tiedon levittämisen välineenä. Suuri osa tiedoista on tekstimuodossa, jonka kaikki verkkoselaimet voivat tehdä helposti. Mutta jo Webin alusta lähtien grafiikalla on ollut tärkeä rooli perustekstisivun parantamisessa. Nykyään ei ole epätavallista nähdä verkkosivuja, jotka ovat 90 prosenttia grafiikkaa. Nämä sivustot eivät välttämättä noudata tiukkaa tiedon levittämiskäsitettä, mutta jotkut niistä ovat varmasti houkuttelevia.
Useimmat meistä pyrkivät verkkosivujen tekstin ja grafiikan tasapainoon. Grafiikka parantaa sivun ulkonäköä ja luettavuutta. Grafiikan tyypillisiä käyttötarkoituksia ovat bannerit, sponsoroivien yritysten mainokset ja värilliset luettelomerkit tärkeiden tekstikappaleiden korostamiseksi.
JavaScript-komentosarjakielellä voidaan parantaa verkkosivuillesi asettamaasi grafiikkaa. JavaScriptiä voidaan käyttää dynaamisesti hallitsemaan sivun graafista sisältöä. Voit esimerkiksi näyttää sivusi yhden taustan aamulla ja toisen iltapäivällä. Ja yöllä voit käyttää tähtikentän taustaa. Tai voit käyttää JavaScriptiä luodaksesi näytön digitaalisille kelloille, osumalaskureille, pylväskaavioille ja muulle.
Tämän kuukauden sarakkeessa kerrotaan useista tavoista käyttää JavaScriptiä ja grafiikkaa. Mutta tästä keskustelusta puuttuu yksi merkittävä aihe: JavaScriptin käyttö animaatioon. Tuo aihe ansaitsee oman sarakkeensa, tulossa pian.
HTML-kuvaelementin ymmärtäminen
elementti on yleisimmin käytetty tunniste graafisen sisällön esittämiseen HTML-dokumentissa (uusimmat HTML-määritykset lisäävät elementin, mutta Netscape ja useimmat muut selaimet eivät vielä tue sitä). Aloittamattomille perussyntaksi
tagi on:
missä "url" on oikein muodostettu kuvatiedoston URL-osoite. URL voi olla absoluuttinen tai suhteellinen. Muista, että kaikki selaimet eivät ole varustettu grafiikan näyttämiselle. Siksi on suositeltavaa sisällyttää kuvaan "vaihtoehtoinen teksti" niille, joille on haettu kuva. Käytä ALT-määritettä tag vaihtoehtoisen tekstin määrittämiseksi. Tässä on esimerkki:
Kuvalla luodut kuvat -tunnistetta pidetään "sisäisenä", koska niitä kohdellaan aivan kuten tekstimerkkejä. Tämä tarkoittaa, että voit leikata kuvia tekstillä, ja selain huolehtii siitä, että kaikki kulkee oikein.
Useimmat kuvat ovat kuitenkin pitempiä kuin niitä ympäröivä teksti. Useimpien selainten tavanomainen toiminta on sijoittaa kuvan alaosa ympäröivän tekstin alareunaan. Voit muuttaa tätä käyttäytymistä, jos haluat eri tasauksen. Yleisimmät kohdistusvalinnat, jotka kaikki kuvia näyttävät selaimet ymmärtävät, ovat:
- alaosa - Kohdistaa tekstin kuvan alaosaan. Tämä on oletusarvo.
- keski - Kohdistaa tekstin kuvan keskelle.
- alkuun - Kohdistaa tekstin kuvan yläosaan.
Voit käyttää vain yhtä tasausta kerrallaan. Syntaksi on:
Selaimet näyttävät yleensä kuvia niiden "luonnollisessa koossa". Jos kuva on esimerkiksi 100 x 100 pikseliä, niin suuri se on, kun se renderöidään selaimen näytöllä. Mutta Netscape-sovelluksella voit muuttaa kuvan kokoa, jos haluat pienemmän tai suuremman, käyttämällä WIDTH- ja HEIGHT-määritteitä. Näiden määritteiden etuna on, että käytettäessä selain luo kuvalle tyhjän ruudun ja täyttää sitten ruudun kuvalla, kun koko sivu latautuu. Tämä viittaa käyttäjiin, että grafiikkaa odotetaan kyseisessä paikassa.
Määritetään vain leveys tai korkeus muuttaa kuvan kokoa suhteessa. Esimerkiksi neliökuvan koon määrittäminen 100 pikselin korkeudelle ja leveydelle. Jos alkuperäinen kuva ei ole neliö, se on kooltaan suhteellinen. Esimerkiksi, jos alkuperäinen kuva on 400 pikseliä leveä ja 100 pikseliä korkea, leveyden muuttaminen 100 pikseliksi pienentää kuvan 25 pikselin korkeuteen.
- Määritä molemmat leveys ja korkeus antaa sinun muuttaa kuvan osuutta haluamallasi tavalla. Voit esimerkiksi muuntaa 400 x 100 pikselin kuvan 120 x 120, 75 x 90 tai muuksi.
Esimerkiksi:
Varoitus: Yhdistettynä JavaScriptiin sinun pitäisi aina anna korkeus ja leveys määritteet kohteelle
Kuvien yhdistäminen JavaScriptin kanssa
JavaScriptiä voidaan käyttää parantamaan HTML-dokumenteissa käytettyjä kuvia. Esimerkiksi JavaScriptiä käyttämällä voit luoda sivun dynaamisesti käyttämällä ehdollisen testilausekkeen, kuten kellonajan, valitsemia kuvia.
Itse asiassa JavaScriptin digitaalinen kellosovellus, joka käyttää JavaScriptiä ja valikoimaa GIF-kuvia, on yksi suosituimmista verkossa. Kello.html-esimerkki käyttää JavaScriptiä näyttämään nykyisen ajan käyttämällä suuria vihreitä LED-numeroita. Jokainen numero on yksilöllinen GIF, joka on yhdistetty JavaScriptin muodostamaan digitaalisen kellon kasvot.
Käytin Russ Walshin toimittamia numeromaisia GIF-tiedostoja; Russ sallii ystävällisesti GIF-tiedostojensa käytön vapaasti verkkosivuilla, kunhan hyvät luottoluokitukset on annettu. Voit käyttää mitä tahansa numeroa, jonka haluat kelloosi, mutta sinun on annettava erillinen GIF-tiedosto jokaiselle numerolle ja erilliset tiedostot kaksoispiste- ja am / pm-ilmaisimille. Muuta clock.html-koodi viittaamaan numeroihin, joita haluat käyttää.
Merkintä: On tärkeää, että annat ehdoton URL-osoite käyttämillesi kuville. Muuten Netscape ei näytä grafiikkaa. Clock.html-esimerkki käyttää funktiota (pathOnly) asiakirjan nykyisen polun purkamiseen. Siksi komentosarja odottaa löytävänsä kuvat samalla polulla kuin asiakirja. Vaihtoehtoisesti voit koodata absoluuttisen URL-osoitteen kovalla koodilla, jos sijoitat kuvat muualle, tai voit käyttää asiakirjan alussa olevaa tagia nimenomaisesti kertoaksesi Netscapelle haluamasi perus-URL-osoitteen.JavaScript-digitaalikello
JavaScript-digitaalikello var Temp; setClock (); function setClock () {var OpenImg = '
'Temp = "" now = new Date (); var CurHour = nyt.getHours (); var CurMinute = now.getMinutes (); nyt = nolla; jos (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } else Ampm = "olen"; jos (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute muu 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); }
JavaScript-kello
Nykyinen aika on: document.write (Temp);
JavaScriptin käyttö asiakaspuolen kuvakarttojen kanssa
Jos sinulla on onni hallita julkaistuja verkkosivujasi sisältävää palvelinta, olet todennäköisesti luonut palvelinpuolen kuvakartat. Nämä ovat kuvia, jotka on "leikattu" pienemmiksi paloiksi; kun käyttäjä napsauttaa kutakin osaa, palvelin reagoi eri toimintaan.
Palvelinpuolen kuvakarttojen haittapuoli on, että tarvitset CGI-ohjelman, joka toimii palvelimella napsautuspyyntöjen käsittelemiseksi. Kaikilla ei ole CGI-käyttöoikeutta. Asiakkaan puoleiset kuvakartat muuttavat sitä: Selaimeen on rakennettu "älykkyys" kuvan leikkaamiseksi ja käyttäjän ohjaamiseksi oikeaan linkkiin - napsautetun kuvan alueen perusteella. Netscape Navigator (versio 2.0 ja uudemmat) on yksi monista selaimista, jotka nyt tukevat tätä standardia.
Netscape vie prosessin vielä pidemmälle, mutta antaa sinun integroida asiakaspuolen kuvakartat JavaScriptin kanssa. Tavallisessa asiakaspuolen kuvakartassa rajoitut vain linkittämiseen toiselle sivulle. Halutessasi voit "linkittää" JavaScript-toimintoon ja antaa kuvakartoillesi entistä enemmän älykkyyttä. Voit esimerkiksi luoda ohjauspaneelin, jonka avulla käyttäjät voivat napsauttaa kuvapainiketta onnistuneesti vain, jos jokin tieto - esimerkiksi käyttäjänimi - on annettu.
Asiakaspuolen kuvakartan anatomia
Kaksi uutta HTML-tagia käytetään asiakaspuolen kuvakarttojen luomiseen. Ne ovat tagi, joka määrittelee karttarakenteen, ja yksi tai useampi tunniste, jotka määrittävät kuvan napsautettavat alueet. Luo kuvakartta määrittämällä tagi ja antamalla kartoitukselle nimi. Syntaksi on:
Voit käyttää kartalla mitä tahansa nimeä, mutta sen tulisi sisältää vain aakkos- ja numeromerkkejä. Poikkeus on alaviiva, mutta vältä alaviivan käyttämistä ensimmäiselle merkille. Määritä seuraavaksi yksi tai useampi tunniste, jotka määrittelevät kuvan alueet. Tunniste käyttää syntaksia:
Viimeisen tunnisteen jälkeen merkitse tunnisteen avulla kartoituksen loppu.
Viimeinen kohde on kuva, jota haluat käyttää, viitaten aiemmin määritettyyn aluekarttaan. Käytä standardia -tunniste uudella USEMAP-määritteellä. Anna USEMAP-määritteelle kartan nimi. Tässä on esimerkki:
Tämä kartta käyttää kuvaa nimeltä control.gif. tag viittaa kartan nimeen, joka on #control (huomaa hash ennen nimeä). Muut ominaisuudet, jotka toimitetaan
-tunnisteessa ei ole reunaa (BORDER = 0) ja kuvan leveys ja korkeus. Kun käyttäjät napsauttavat takanuolta (joka on ensimmäinen määritetty alue), heidät lähetetään index.html -sivulle. Päinvastoin, jos he napsauttavat sisällön "painiketta" (toinen määritetty alue), heidät siirretään toc.html-nimiselle sivulle. Ja jos he napsauttavat eteenpäin osoittavaa nuolta, heidät siirretään sivulle nimeltä backpage.html.
JavaScriptin lisääminen kuvakartan hallintaan
JavaScriptiä voidaan käyttää asiakaspuolen kuvakarttojen laajentamiseen. Lisää joustavuutta antamalla tagin HREF: lle JavaScript-funktion nimi. Sen sijaan, että hyppisit jollekin sivulle, suoritetaan JavaScript-koodi, jossa voit tehdä mitä haluat. Temppu: Käytä URL-osoitteeseen JavaScript: -protokollaa ja seuraa sitä haluamasi toiminnon nimellä.
Oletetaan esimerkiksi, että haluat käyttäjien palaavan vain yhdelle sivulle historialuettelossa napsauttaessaan takanuolta. Voit käyttää window.history.go (-1) -menetelmää hypätäksesi yhden sivun taaksepäin käyttäjän historialuettelossa. Voit joko antaa koko tämän toiminnon JavaScript: -protokollan jälkeen tai kutsua käyttäjän määrittämän funktion, joka sisältää tämän ohjeen. Tässä ovat molemmat menetelmät:
tai ...
... ja muualla asiakirjassa:
funktio goBack () {window.history.go (-1); } Henkilökohtaisesti pidän parempana jälkimmäisestä menetelmästä, koska minun on usein annettava useita JavaScript-toimintoja, jotka haluan suorittaa. Mutta voit käyttää mitä tahansa menetelmää, josta pidät parhaiten ja joka parhaiten sopii tilanteeseen.
Seuraava on toimiva esimerkki asiakaspuolen kuvakarttojen käytöstä JavaScriptillä. Painikkeet näyttävät hälytysruudun osoittamaan, että JavaScript: URL todella toimii. Myös eteen- ja taaksepäin-painikkeet toimivat - olettaen, että historialuettelossasi on sivuja eteenpäin ja taaksepäin. Jos historialuettelo on tyhjä (olet ladannut asiakirjan esimerkiksi uuteen ikkunaan), nykyinen sivu pysyy.
Esimerkki asiakaspuolen kuvakartasta
Asiakkaan puolen kuvakartan esimerkkitoiminto goBack () {alert ("Back"); ikkuna.historia.go (-1); }
function goForward () {alert ("Lähetä eteenpäin"); ikkuna.historia.go (1); }
function toc () {alert ("Sisällysluettelo"); }
