Siirry sisältöön. | Siirry navigointiin

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

Kuvakartta

tekijä: Tanja Tuulikki Välisalo Viimeisin muutos perjantai 05. joulukuuta 2014, 13.35

Kuvakartta on kuva, jonka eri osat toimivat hyperlinkkeinä. Kuvakartan luomiseen tarvitaan kolme eri elementtiä: img, map ja area.

Img-elementillä verkkosivulle lisätään kuva, josta linkit muodostetaan.Kun kuvatiedostoa halutaan käyttää kuvakarttana, niin kuvan leveys ja korkeus määritellään.

Sen jälkeen tulee map-elementti, jonka sisällä määritellään kuvalinkkien muodot, sijainnit ja kohteet.

<img src="maailmankartta.jpg" alt="maailman kartta" width="150" height="150" usemap="#maailma" />
<map name="maailma">
  <area shape="rect" coords="0,0,82,126" href="japani.html" alt="Japani">
  <area shape="circle" coords="90,58,3" href="bulgaria.html" alt="Bulgaria">
  <area shape="circle" coords="124,58,8" href="brasilia.html" alt="Brasilia">
</map>

Elementin area tarvittavat attribuutit ovat shape, coords, href ja alt. Attribuutti shape määrittelee hyperlinkin
muodostavan kuvan osan muodon, joka voi olla pyöreä (circ), suorakulmainen (rect) tai monikulmainen
(poly). Attribuutti coords määrittää linkkialueen koordinaatit x- ja y-akselin arvoina pilkulla toisistaan
erotettuina. Ympyrän osalta merkittäisiin keskipisteen koordinaatit ja ympyrän säde; suorakulmion osalta
vasemman yläkulman ja oikean alakulman koordinaatit; monikulmion kohdalta kaikkien kulmien koordinaatit.

Tehtävä. Sukupuu.

Luodaan kuva sukupuusta, jossa kuvan osat toimivat linkkeinä alasivuille. Haetaan ensin kuva, jota käytetään kuvakarttana.

  • Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315/ ja tallenna sieltä kartta.jpg- tiedosto.
  • Lisää äsken ladattu kuva html-tiedostoon. Muista pakolliset attribuutit src ja alt.
  • Lisää img-elementin jälkeen map-elementti. Anna sille id-attribuutti. Sen arvoksi tarvitaan yksilöllinen tunniste, esimerkiksi talo.
  • Jotta img- ja map-elementtien välille muodostuisi yhteys, anna img-elementille tavallisten tavallisten src- ja alt-attribuuttien lisäksi attribuutti usemap ja sille arvoksi #talo.
  • Kuvakartan laatiminen edellyttää kuvan koon määrittämistä img-elementissä. Kuva on 300 px leveä ja 500 px korkea. Anna img-elementille attribuutit width ja height.

Elementin map sisälle sijoitetaan hyperlinkkialueiden määrittelyt area-elementin avulla. Elementti area on tyhjä elementti.

  • Lisää map-elementin sisälle area-elementti.

Muodostetaan Isoäiti-tekstistä hyperlinkki.

  • Määritä linkkialueen muodoksi monikulmainen.
  • Anna kulmien koordinaatit luettelemalla ne coords-attribuutin arvoina. Ikkunan kulmien sijainnit voi selvittää kuvankäsittelyohjelmassa, mutta tässä ne ovat valmiina:
    • Isoäiti: vasen yläkulma 10, 220 – oikea alakulma 80, 240
    • Isoisä: 40, 330 – 110, 350
    • Mummo 130, 130 – 200, 150
    • Vaari 220, 220 – 290, 240
  • Määritä hyperlinkin kohde href-attribuutin avulla ja anna alt-attribuutilla kuva-alueelle nimi.