Kaart-kujutise klient variant.

Kaart-kujutise klient-variant võimaldab salvestada kogu kaardi konfiguratsiooni informatsiooni HTML faili, millesse on sisestatud ka kujutis. Server-variandi kasutamise korral saadab lehitseja päringu serverisse valitud viitele vastava URL aadressi saamiseks ja ootab sealt vastust vajaliku informatsiooniga. See võib esile kutsuda lisakulud ajas. Klient-variandi kasutamisel on serveri poole pöördumiste arv väiksem ja samas suureneb informatsioonile ligipääsu saamise kiirus. Selles variandis pole samuti vaja pöörduda serveri poole selleks, et konfigureerida kaarti, seepärast võib kogu töö kaart-kujutise loomiseks teha lokaalselt ja samaaegselt HTML dokumendi redigeerimisega. Erinevalt server-variandist kus igale kaart-kujutisele on vajalik luua eraldi konfiguratsiooni fail võib klient-variandis kaardi konfiguratsioon asuda vahetult samas HTML dokumendis, milles on loodud viide kujutisele, mis on kaart-kujutise aluseks. Üsna tihti nii tehaksegi ehki on võimalik salvestada kaardi konfiguratsioon ka eraldi faili ja viidata siis sellele.

Parameeter USEMAP.

Selleks, et osutada sisestatud kujutisele kui kaart-kujutise lausele tuleb kasutada teegis <IMG> parameetrit USEMAP. Parameetri USEMAP väärtuseks on viide kaardi konfiguratsiooni kirjeldusele.

Näiteks: <IMG SRC="logo.gif" USEMAP=#logo>.

Selles näites on kujutis "logo.gif" aluseks kaart-kujutisele, mis on realiseeritud klient variandis. Aktiivsete alade konfiguratsioonide kirjeldused võivad asuda samas failis mis ka antud HTML koodi katke. Konfiguratsioonide kirjelduse nimeks antud näites on siis logo.

Teek <MAP>.

Kaart-kujutise aktiivsete alade konfiguratsiooni kirjeldamiseks kasutatakse konteiner teeki <MAP>.

Parameeter NAME.

Teegi <MAP> ainsaks parameetriks on parameeter NAME. Parameetri NAME väärtus määrab nime, mis peab vastama nimele parameetris USEMAP. Teek <MAP> nõuab vastavat sulgevat teeki </MAP>. Selle teegipaari sees peavad asuma kaardi aktiivsete alade kirjeldused.

Teek <AREA>.

Iga teek <AREA> määratleb ühe aktiivse ala. Sulgev teek ei ole vajalik. Aktiivsed alad võivad asuda osaliselt teineteise peal. Juhul kui mingi punkt kuulub samaaegselt mitmesse aktiivsesse alasse, siis realiseeritakse eelkõige see viide, mis kirjeldus asub esimesena aktiivsete alade kirjelduste loendis.

Teegi <AREA> parameetriteks on: SHAPE, COORDS, HREF, NOHREF, TARGET ja ALT.

Parameeter SHAPE.

Parameeter SHAPE määratleb aktiivse ala kuju. Lubatud väärtusteks on: rect, circle, poly ja default. Need väärtused annavad ette alad: ristküliku, ringi, hulknurgana. Viimane väärtus - default - määratleb kõik ala punktid. Kui parameeter SHAPE ära jätta, siis on selle väärtuseks vaikimisi rect.

Märkus 1: Erinevalt server-variandist kus default tüüpi ala määratleb kujutisel kõik punktis mis ei kuulu ühessegi aktiivsesse alasse, määratleb tüüp default klient-variandis kõik kaart-kujutise punktid. Seepärast tuleb aktiivse ala tüüp default alati paigutada aktiivsete alade kirjelduste loendis viimasele kohale. Kui aga panna tüübi default kirjeldus loendis esimesele kohale, siis klient-variandis realiseeritakse alati ainult see viide ja kõiki teisi viiteid ignoreeritakse.

Märkus 2: Lehitseja Microsoft Internet Explorer ei luba kasutada default tüüpi aktiivset ala. Seepärast tuleb tüübi default asemel kasutada ristkülikukujulist ala, mille mõõtmed vastavad täpselt kogu kujutise mõõtmetega (loomulikult peab see kirjeldus olema loendis viimane).

Parameeter COORDS.

Parameetriga COORDS määratletakse üksiku aktiivse ala koordinaadid. Parameetri väärtusteks on aktiivet ala kirjeldavate vastavate koordinaatide loend, mis on eraldatud üksteisest komaga. Koordinaadid pannakse kirja positiivsete täisarvudena.

Koordinaatide alguspunkt asub kujutise vasakus ülemises nurgas, millele vastab väärtus 0,0. Esimene arv määratleb koordinaadi horisontaalsuunas ja teine arv määratleb koordinaadi vertikaalsuunas.

Koordinaatide arv loendis sõltub etteantud ala tüübist:

1. Tüüp rect - vasak ülemine nurk ja parem alumine nurk (neli arvu).
2. Tüüp circle - ringi keskpunkti koordinaadid ja raadius (kolm arvu).
3. Tüüp poly - hulknurga tippude koordinaadid vajalikus järjekorras (2*n arvu), kus n - hulknurga tippude arv, kusjuures viimane punkt ei pea kokku langema esimese punktiga.
4. Tüüp default - ei vaja koordinaatide määratlemist.

Parameetrid HREF ja NOHREF.

Parameetrid HREF ja NOHREF on teineteist vastamisi välistavad parameetrid. Kui ei ole antud ühtegi nendest parameetritest siis ei ole antud alal üldse viidet. Sedasama ilmselt nõuab ka parameeter NOHREF, millel puuduvad väärtused. Parameeter HREF määratleb viite aadressi, mida võib kirjutada nii absoluutse kui ka suhtelise viitena. Viite kirjutamise reeglid on samad, mis ka teegis <A>.

Parameetrit NOHREF on kasulik kasutada siis, kui on vaja mingist aktiivsest ala sees mingi osa muuta mitteaktiivseks. Olgu meil vaja luua aktiivne ala millel oleks rõnga kuju. Selline tüüp ei ole ette nähtud võimalike alade tüüpide hulgas kuid siiski on seda võimalik luua kahe ringikujulise ala määratlemisega. Selleks on vaja eelnevalt luua väiksem ringikujuline ala ja määrata sellele parameeter NOHREF. Järgnevalt tuleb luua suurem ringikujuline ala mille kekspunkt langeb kokku väiksema ringikujulise ala keskpunktiga ning määrata vajalik viide. Siis ala, mis jääb kahe ringjoone vahele ongi meile vajalikuks ringikujuliseks alaks.

Selline lähenemisviis, kus on kasutusel teineteist vastastikku katvad alad, võimaldab luua üsna iseäraliku kujuga aktiivseid alasid.

Parameeter TARGET.

Parameetrit TARGET kasutatakse töös paanidega. Tema eesmärgiks on anda ette paani nimi, millesse laaditakse dokument millele osutab antud viide. Üksikasjalikumat informatsiooni parameetri kasutamise kohta vaadake eelnevast tunnist, kus kirjeldasime paanidevahelist navigatsiooni.

Parameeter ALT.

Parameeter ALT võimaldab kirja panna alternatiivse (selgitava) teksti igale kaardi aktiivsele alale. Sisuliselt on see tekst vaid kommentaaride rollis HTML dokumendi loojale. Samas kui alternatiivne tekst, mis on kirjas teegis <IMG> ja ilmub kuvale siis kui kasutaja on välja lülitanud graafika allalaadimise režiimi, siis aktiivsete alade alternatiivset teksti ei kuvata ekraanil kunagi.

Ülesanne 1. Avame kaustast dokumendi ja salvestame selle uue nimega.

1. Avage oma töölaual olev kaust "HTML40"
2. Käivitage Notepad (Start-Programs-Accessories-Notepad) või intelligentsem tee Notepad käivitamiseks (Start - Run…; kirjutame lahtrisse notepad ja klõpsame korraldusnupul OK).
3. Avage Notepad abiga kaustast "HTML40" dokument "uus.htm".
4. Salvestage dokument samasse kausta uue nimega "kaart-kujutis.htm".
5. Avage uus dokument "kaart-kujutis.htm" ka lehitseja abil.

Ülesanne 2. Laadime alla graafilise kujutise.

1. Klõpsake sellel viitel hiire parempoolset klahvi.
2. Valige avanenud kontekstmenüüst korraldus Save Taget As…
3. Salvestage pilt "grafmeny.gif" kausta "HTML40".

Ülesanne 3. Määrame kujutisel "grafmeny.gif" olevate kujundite (aktiivsete alade) koordinaadid ja sisestame need vastavatesse teekidesse HTML koodis.

1. Käivitage programm Paint.
2. Avage või aktiveerige Notepad aken dokumendiga "kaart-kujutis.htm".
3. Avage programmi Paint abil fail "grafmeny.gif".
   
   Pildil on must taust, see värv (must) on selles GIF failis nn läbipaistev värv, mis lehitsejas on läbipaistev, st mitte kuvatav.
   
   
4. Muutke HTML dokumendi taust näiteks kollaseks nii: BGCOLOR=yellow.
5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
6. Sisestame aktiivsete alade kaart-kujutise aluse nii:
   
   <IMG SRC="grafmeny.gif" WIDTH=200 HEIGHT=600 ALIGN=left USEMAP=#grafmeny BORDER="no">
   
   nagu näete on aluseks pilt "grafmeny.gif" selle laiuse WIDTH ja kõrguse HEIGHT ma panin kirja selleks, et luua kohe alglaadimisel õige kujundus. Kaart-kujutise kirjelduse nimeks on #grafmeny ja lingile vaikimisi määratud raami mittekuvamiseks on parameeter BORDER.
   
   
7. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
8. Sisestame nüüd uuelt realt järgmise teegi:
   
   <MAP NAME="grafmeny">
   
   </MAP>
   
   
9. Sisestame teekide <MAP> ja </MAP> vahele uuelt realt nüüd ülevalt teist kujundit (ristkülikut) kirjeldava teegi:
   
   <AREA SHAPE=rect COORDS="X1,Y1,X2,Y2" HREF="loogilinevormindamine.htm" ALT="ristkülik">
   
   
10. X1,Y1,X2 ja Y2 väärtused saame nii: avage või aktiveerige programm Paint dokumendiga "grafmeny.gif". osutage nüüd pliiatsige ülevalt teise ristküliku (sisse on kirjutatud - loogiline vormindamine) vasakule ülemisele nurgale - lugege olekuribalt selle punkti koordinaadid ja sisestage need X1 ja Y1 asemele. Sarnaselt toimige ka punkti X2 ja Y2 koordinaatide määratlemiseks.
11. Salvestage muudatus Notepadis ja värskendage lehitseja kuva
12. Kuna pole määratud parameetrit TARGET siis avatakse dokument "loogilinevormindamine.htm" vaikimisi dokumendi "kaart-kujutis.htm" kuva "peale". Tagasi saab tööriistariba nupu Back abil.
13. Sisestame nüüd teekide <MAP> ja </MAP> vahele uuelt realt ülevalt kolmandat kujundit (ringi) kirjeldava teegi:
    
    <AREA SHAPE=circle COORDS="X1,Y1,R" HREF="paanid-2.htm" ALT="ring">
    
    
14. Kus X1, Y1 on ringi keskpunktiks ja R ringjoone raadiuseks. Täpsete väärtuste saamiseks kasutage taas programmi Paint. Pöörake tähelepanu sellele, et ringjoone raadius tuleb arvutada. Kergem on seda teha nii: määrake X1 seejärel liikuge hiirega premale horisontaalsuunas ja määrake punkt X2, mis asub ringjoonel, seejärel lahutage X2-X1 siis saategi ringjoone raadiuse R: R=X2-X1.
15. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
16. Kuna pole määratud parameetrit TARGET siis avatakse dokument "paanid-2.htm" vaikimisi dokumendi "kaart-kujutis.htm" kuva "peale". Tagasi saab tööriistariba nupu Back abil.
17. Järgmiseks sisestame teekide <MAP> ja </MAP> vahele uuelt realt hulknurka kirjeldava teegi:
    
    <AREA SHAPE=poly COORDS="X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5,X6,Y6,X7,Y7,X8,Y8,X9,Y9" HREF="test.htm" ALT="hulknurk">
    
    
18. Kus paarid X1,Y1,X2,Y2, …,X9,Y9 on hulknurga tipunurkadele vastavad koordinaadid.
19. Salvestage muudatus Notepadis ja värskendage lehitseja kuva
20. Sisestage nüüd teekide <MAP> ja </MAP> vahele uuelt realt väikese ringi koordinaadid:
    
    <AREA SHAPE=circle COORDS="X1,Y1,R1" NOHREF ALT="väike ring">
    
    
21. Sisestage nüüd teekide <MAP> ja </MAP> vahele uuelt realt suure ringi koordinaadid:
    
    <AREA SHAPE=circle COORDS="X2,Y2,R2" HREF="ujuvad-paanid.htm" ALT="suur ring">
    
    
22. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Liigutage nüüd hiirekursorit sellel "sõõrikul". Nagu näete muutub hiirekursor käekujuliseks ainult kahe ringjoone vahel.
    
    
23. Ja lõpuks sisestame teekide <MAP> ja </MAP> vahele uuelt realt kirjelduse kõikide väljaspool eelpool kirjeldatud aktiivseid alasid asuvatele punktidele:
    
    <AREA SHAPE=rect COORDS="0,0,200,600" HREF="tabelid-2.htm" ALT="alternatiivsed punktid">
    
    
24. Siin on 0,0 ja 200,600 kujutise vasak ülemine ja parem alumine nurk.
25. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Libistage nüüd hiirekursorit üle graafilise menüü ja jälgige olekuribale ilmuvaid viiteid. Igakord kui hiirekursor asub mõne "aktiivse" ala sees kuvatakse olekuribal sellele alale vastav viide. Kui aga hiirekursor on väljaspool aktiivset ala, siis kuvatakse viide dokumendile "tabelid-2.htm".

Ülesanne 4. Muudame navigatsiooni mugavamaks!

1. Muudame nüüd navigatsiooni mugavaks sellega, et lisame oma HTML dokumendile ujuva-paani, millesse avaneksid meie poolt loodud kaart-kujutiselt viidatavad dokumendid.
   
   Sisestage uuelt realt teegi <MAP> järele:
   
   <IFRAME SRC="uus.htm" ALIGN=top WIDTH=500 HEIGHT=400 NAME="paan"></IFRAME>
   
   
2. Lisage nüüd kõikidele aktiivsete alade kirjeldustele teekides <AREA> parameeter TARGET="paan".
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Proovige järele kõik aktiivsed alad kaart-kujutisel. Viitega avanevad dokumendid avanevad paanis nimega "paan".