Omena
Kiivi
Päärynä
Kuvien yhteydessä mainittiin, että kuvakin voi olla linkki ja että normaalissa kuvalinkissä on samantekevää, mihin kohtaan käyttäjä napsauttaa. Tässä käsiteltävät karttalinkit ovat monipuolisempia: kuvasta voidaan tehdä sellainen, että sen eri kohtien napsauttamisella on erilaisia vaikutuksia.
Nimitys "karttalinkki" ei ole vakiintunut, vaan useimmiten käytetään suomessakin englannin sanaa "imagemap" (tai "image map"). Muualla käytettyjä suomennoksia ovat "sensitiivinen kartta", "kuvakartta", "aktiivinen kuva", "aktiivinen kartta" ym.. Nimitys "karttalinkki" yrittää, englannin sanan tavoin, tuoda esiin, että kyse on jostakin karttamaisesta, usein nimenomaan kartasta.
Se, mitä tapahtuu, kun karttalinkin kohtaa napsautetaan, riippuu siitä, miten karttalinkki on tehty. Yksinkertaisimmassa tapauksessa kuvan eri alueet ovat linkkejä eri sivuille. Virtual Finlandin Active Map of Finland on esimerkki tällaisesta: kartassa näkyviä paikkakuntia napsauttamalla pääsee niitä käsitteleville sivuille.
Mutta voidaan myös rakentaa esimerkiksi kartta, jonka mielivaltaisen kohdan napsauttaminen tuottaa uuden kartan, jossa kyseinen kohta on keskipisteenä ja joka on suuremmassa mittakaavassa kuin alkuperäinen kartta. Tämä on jo huomattavasti vaativampaa toteuttaa.
Karttojen käytössä on syytä ottaa huomioon, että kartat ovat yleensä tekijänoikeuden alaisia eli niiden käyttöön tarvitaan lupa kartan valmistajalta.
Karttalinkin kuvan ei tarvitse olla kartta, mutta hyötyä karttalinkeistä tavallisiin linkkeihin verrattuna saadaan yleensä vain silloin, kun kuva esittää jotain olennaisesti kaksiulotteista samassa mielessä kuin kartta on kaksiulotteinen. Kovin usein näkee kuitenkin karttalinkkejä, joissa vain on tekstiä kuvina.
Vaikka kyseessä olisi olennaisesti kuvallinen aineisto, jonka osien halutaan olevan linkkejä, ei siitä välttämättä kannata tehdä karttalinkkiä. Helpompi ja käytettävyydeltään parempi ratkaisu on yleensä tehdä kustakin kuvasta erillinen linkki seuraavaan tapaan:
|
Omena |
Kiivi |
Päärynä |
Tässäkään tapauksessa ei aineisto ole sillä tavoin olennaisesti kaksiulotteinen, että karttalinkistä olisi erityistä etua erillisiin kuvalinkkeihin verrattuna. Vaikka kukin kuva on kaksiulotteinen, ne voidaan järjestää siististi riviin ja tämä on luultavasti parempikin kuin asetelmatyyppinen kuva. Tällöinhän saadaan kuvien alle siististi kuvatekstit.
Tässä tapauksessa kukin linkeistä on toteutettu tähän tapaan:
<a href="..."><img alt="" src="..."><br>Omena</a>
Tällöin kuva ja teksti yhdessä muodostavat linkin, mistä on etua muun
muassa silloin, kun käyttäjä siirtyy linkistä seuraavaan
tab-näppäimellä. (Jos kuva ja teksti olisivat erillisiä linkkejä,
olisi mukana turhia linkkejä, jotka vaativat lisänäppäilyä, kun mennään
linkkikokoelman lävitse.) Tällöin on asianmukaista
ilmoittaa kuvan tekstivaihtoehto tyhjäksi, alt="".
Jos kuvatekstit halutaan jättää pois,
on alt-teksteiksi kirjoitettava kuvan merkitystä
vastaava teksti, esim. tässä alt="omena" jne.
Selainpohjainen karttalinkki, client-side image map, on sellainen, että HTML-dokumentissa itsessään on tieto kuvan jakautumisesta eri alueisiin sekä siitä, mihin osoitteeseen kukin alue viittaa. Kun käyttäjä napsauttaa kuvan kohtaa, selain määrittää, mihin alueeseen osuttiin, ja sen jälkeen siirtyy vastaavaan osoitteeseen. Selain saattaa tässä yhteydessä näyttää kyseisen alueen ääriviivat ohuena katkoviivana.
Palvelinpohjainen karttalinkki, server-side image map, on sellainen, että HTML-dokumentissa on vain viittaus palvelimessa olevaan koodiin, palvelinskriptiin, joka käsittelee napsautuksen. Kun käyttäjä napsauttaa kuvan kohtaa, selain lähettää palvelinskriptille kyseisen kohdan tarkat x- ja y-koordinaatit. On sitten skriptin asia, miten se niitä käyttää ja mitä se muutoin tekee.
Selaimet tyypillisesti näyttävät tila- eli statusrivillään
tietoa tilanteesta, kun käyttäjä liikuttaa kursoria karttalinkin alueella.
Tilarivi on tavallisesti selaimen ikkunan alalaidassa, itse sivun
alapuolella. Jos kyseessä on selainpohjainen karttalinkki, tilarivillä
näkyy se osoite, johon se alue viittaa, missä kursori on.
Jos taas kyseessä on palvelinpohjainen karttalinkki, tilarivillä näkyy
palvelinskriptin osoite, kysymysmerkki ja sen pisteen koordinaatit,
jossa kursori on, esim.
http://jkorpela.fi/cgi-bin/koord.cgi?42,10
Yleensä selainpohjainen karttalinkki on paljon parempi kuin palvelinpohjainen, jos valinnanvaraa on. Palvelinpohjaista kannattaa käyttää vain silloin, kun kyse on monimutkaisemmasta asiasta kuin siitä, että kuvan eri alueita vastaavat eri kohdeosoitteet.
Periaatteessa on mahdollista tehdä yhdistetty palvelin- ja selainpohjainen karttalinkki. Sellaisia suositeltiin Webin alkuaikoina, jolloin jotkin selaimet tukivat vain palvelinpohjaisia karttalinkkejä, jotka eivät vaadi selaimelta juuri mitään. Nykyisin tämä on tarpeetonta.
Selainpohjaisen karttalinkin tekemisessä kannattaa yleensä käyttää jotakin erityistä ohjelmaa, esimerkiksi ( Windows-ympäristössä) MapThis (maksuton) tai MapEdit (hinta 10 dollaria). Sellaista käytettäessä voidaan hankalin työ eli kuvan alueiden määrittely tehdä vuorovaikutteisesti, graafisesti, kuten piirto-ohjelmassa. Petrus Kaartinen on kirjoittanut suomenkielisen ohjeen MapThis-ohjelman käytöstä; ohje on osittain vanhentunut, mutta hyödyllinen.
Yksinkertaisessa tapauksessa, lähinnä kun alueet ovat vain suorakulmioita tai ympyröitä, voidaan tarvittava HTML-koodi kirjoittaa melko helposti "käsin". Tosin käytännössä tarvitaan yleensä jokin piirto-ohjelma, kuten Paint, jolla voi määrittää haluttujen kohtien x- ja y-koordinaatit.
Joka tapauksessa on hyvä tietää karttalinkkien HTML-merkkauksen perusteet, muun muassa siksi, että mainittuja työkaluohjelmia pitää hiukan auttaa tekemään asiat oikein. Niiden tuottamaan koodiin on usein syytä lisätä muutamia asioita.
img) ja
karttaelementti (map)Selainpohjaisessa karttalinkissä käytettävä kuva liitetään
HTML-dokumenttiin normaalilla img-elementillä,
johon lisätään yksi määrite:
usemap="#kartta".
Tässä kartta on haluttu nimi, jonka avulla
kuva liitetään määrättyyn map-elementtiin,
nimittäin sellaiseen, jossa on määrite
name="kartta".
Itse kuvan siis ilmoittaa img-elementti, kun
taas kuvan alueet määrittelee map-elementti puhtaasti
geometrisesti: suorakulmioina, ympyröinä ja monikulmioina
koordinaattien avulla. Kukin alue ilmaistaan
area-elementillä, ja niitä voi olla
map-elementin sisällä miten monta tahansa.
Alueiden ei tarvitse vastata mitään erityisiä kuvioita kuvan sisällä,
mutta käytännössä ne tietysti yleensä vastaavat.
Voimme sijoittaa map-elementin melko vapaasti
dokumenttiin, koska sillä ei ole välitöntä vaikutusta dokumentin
näkyvään asuun. Loogisin paikka lienee juuri ennen
img-elementtiä tai heti sen jälkeen.
Tässä on alkeellinen esimerkki, jossa kuvakartta sisältää
vain yhden neliön ja yhden ympyrän:
<map name="geom">
<area shape="circle" coords="24,19,12" href="http://www.w3.org"
alt="W3C" title="W3C">
<area shape="rect" coords="56,18,83,46" href="http://www.w3c.tut.fi"
alt="W3C:n Suomen-toimisto" title="W3C/Suomi">
</map>
<img alt="Demo: Geometrinen arvoitus" src="geom.gif"
width="100" height="50" align="right" usemap="#geom">
Selaimet yleensä piirtävät tällöin koko kuvalle sinisen reunuksen
samaan tapaan kuin kuvalle, joka on tavallinen linkki. Tämän
voi estää img-elementin määritteellä border="0",
mutta on hyvä huomata, että sininen reunus toimii vihjeenä siitä, että
kyseessä on jotain linkintapaista.
Alueen kuvaamiseen käytettävän area-elementin perusrakenne
on seuraava:
<area alt="vaihtoehto"
href="osoite"
shape="muoto"
coords="koordinaatit">Tässä määritteiden merkitykset ovat seuraavat:
alt ilmoittaa tekstivaihtoehdon samaan tapaan
kuin img-elementissä. Erityisesti on huomattava, että
tekstiselain esittää karttalinkin olennaisesti valikkona, jonka
tekstit vastaavat näin määriteltyjä vaihtoehtoja. Jos alue esimerkiksi
vastaa jonkin todellisen kartaan maantieteellistä aluetta, niin
alt-tekstiksi sopii alueen nimi.
href ilmoittaa osoitteen, johon alue viittaa linkin
tavoin, käytännössä siis yleensä sivun, jolle siirrytään, jos kuvaa
napsautetaan alueen kohdalla. Tämän määritteen tilalle voi olla myös
nohref, jolloin aluetta ei vastaa mikään osoite eikä
napsauttaminen johda minnekään.
shape ilmoittaa alueen muodon, joka on jokin
seuraavista:
rect - suorakulmio
circle - ympyrä
poly - monikulmio
coords ilmoittaa koordinaatit, jotka määräävät
alueen yksityiskohtaisesti. Tällöin koordinaatiston nollakohtana
(origona) pidetään koko kuvan vasenta yläkulmaa, ja
x-arvot kasvavat oikealle mentäessä, y-arvot alaspäin mentäessä.
Koordinaatit ilmaistaan pilkuilla toisistaan erotettuina lukuina;
mittayksikkönä on aina kuvapiste eli pikseli.
Koordinaattien ilmaisemisen tapa riippuu alueen muodosta seuraavasti:
shape="rect", niin
coords="x1,y1,x2,y2" siten, että
(x1,y1) on neliökulmion
vasen yläkulma ja
(x2,y2) on sen oikea alakulma.
shape="circle", niin
coords="x,y,r" siten, että
(x,y) on
ympyrän keskipiste ja r on sen säde.
shape="poly", niin
coords="x1,y1,x2,y2,..." siten, että kukin
(xi,yi) ilmoittaa
monikulmion yhden kärjen eli murtoviivan taitekohdan. Esimerkiksi
shape="poly" coords="10,50,15,20,20,50" määrittelee
kolmion, jonka kärjet ovat pisteissä (10,50), (15,20) ja (20,50).
Jos alueet menevät osittainkaan päällekkäin, niin
ensimmäisenä määritelty alue on määräävä. Saattaa siis olla
merkitsevää, missä järjestyksessä area-elementit ovat.
Jos halutaan vaikkapa määritellä suorakulmio, jonka sisällä on
ympyrä, niin että ympyrää vastaa jokin osoite ja sen ulkopuolella mutta
suorakulmion sisällä olevaa osaa jokin toinen osoite, niin on
kirjoitettava ensimmäiseksi ympyrää vastaava area-elementti.
Lisäksi voi olla mm. title-määrite, jonka arvon
useat selaimet näyttävät eräänlaisena avustustekstinä, kun kursori
viedään elementtiä vastaavalle alueelle.
Kuten edellä mainittiin, palvelinpohjainen karttalinkki edellyttää palvelimessa toimivaa skriptiä, esimerkiksi CGI-skriptiä, joka ottaa vastaan koordinaatit ja tekee jotain mielekästä. Kyseinen skripti voi olla hyvinkin monimutkainen. HTML-dokumenttiin tarvittava rakenne sen sijaan on yksinkertainen:
img-elementti, jossa on
määrite ismap, joka kertoo, että kyseessä
on palvelinpohjainen karttalinkki.
<a href="...">...</a> sisään
siten, että href-määritteen arvo ilmoittaa
palvelinskriptin osoitteen.
<a
href="http://jkorpela.fi/cgi-bin/koord.cgi"><img
ismap src="circle.png" alt="[Ympyräkuvio testausta varten.]"
title=""
width="200" height="200" border="0"></a>Toisin sanoen kirjoitetaan kuva, joka on linkki, ja lisukkeena vain
on ismap-määrite. Tämä määrite aiheuttaa käytännössä
sen, että linkkiä seurattaessa selain lisää href-määritteen
arvon perään ns. kyselyosan, joka koostuu kysymysmerkistä
ja valitun pisteen koordinaateista. Koordinaatit ovat suhteellisia,
suhteessa kuvan vasempaan yläkulmaan siten, että
x-koordinaatit kasvavat (nollasta lähtien) oikealle mentäessä ja
y-koordinaatit alaspäin mentäessä.
![[Ympyräkuvio testausta varten.]](circle.png)
Kuten edellä mainittiin, karttalinkkiin liittyvän
palvelinskriptin tekeminen on usein vaativaa ja työlästä.
Mutta seuraavassa on alkeellinen esimerkki Perlillä
kirjoitetusta CGI-skriptistä, joka vain ilmoittaa
valitun pisteen etäisyyden annetusta pisteestä.
Tätä voi käyttää vaikkapa sen testaamiseen, miten
hyvin käyttäjä osuu ympyrän keskipisteeseen, kun
keskipistettä ei ole merkitty. (Jos tällaista haluttaisiin
oikeasti testata, pitäisi estää se edellä mainittu selaimen
piirre, että koordinaatit näkyvät selaimen tilarivillä.)
Skripti on seuraava:
#!/usr/local/gnu/bin/perl
use CGI qw(:standard);
$title = 'Koordinaattitesti';
$origox = 100;
$origoy = 100;
$data = $ENV{'QUERY_STRING'};
$data =~ m/(\d+),(\d+)/;
$xpoikk = abs($1 - $origox);
$ypoikk = abs($2 - $origoy);
print header, start_html(-title=>$title), h1($title),
p("Osuit vaakasuunnassa $xpoikk pikselin päähän ja ",
"pystysuunnassa $ypoikk pikselin päähän keskipisteestä."),
end_html;alt texts for image maps