Web-julkaisemisen opas, luku 3 Lisukkeet: Mitä kaikkea voisikaan lisäksi tehdä:

Karttalinkit (imagemaps)

Sisällys

Mikä karttalinkki on ja mihin se sopii?

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.

Vaihtoehto: erilliset kuvat linkkeinä

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.

Tyypit: selainpohjainen ja palvelinpohjainen

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://www.cs.tut.fi/cgi-bin/run/~jkorpela/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 tekeminen

Yleensä erityisohjelmilla

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.

Karttalinkkien HTML-merkkauksen idea on hyvä tuntea

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.

Kuvaelementti (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.

Esimerkki

W3C W3C:n Suomen-toimisto Demo: Geometrinen arvoitus 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.

Erilaisia alueita

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:

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.

Palvelinpohjaisen karttalinkin tekeminen

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:

Esimerkki:
<a href="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/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.] 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;

Lisätietoja karttalinkeistä