Kuvat ja kuvakartat

IMG - Kuva

<IMG SRC="URL">
SRC=URL, ALT=string, ALIGN=left|right|top|middle|bottom, HEIGHT=n, WIDTH=n, BORDER=n, HSPACE=n, VSPACE=n, USEMAP=URL, ISMAP

Kuvan lisääminen tekstin joukkoon käy IMG-koodilla. SRC-atribuutti kertoo kuvan sijainnin. Sijainti voi olla joko absoluuttinen tai relatiivinen.

Jokaisen IMG-koodin pitäisi sisältää SRC-attribuutin lisäksi ALT, HEIGHT ja WIDTH -attribuutit. ALT kertoo tekstin, joka näytetään, jos kuvaa ei pystytä näyttämään. Tekstin pitäisi kuvata mahdollisimman hyvin kuvan sisältö. Joskus dokumentista selviää kuvan sisältö. Tällöin ALT-koodin pitäisi olla ALT="", jolloin tekstipohjaiset selaimet eivät näytä turhauttavaa [INLINE] tai [IMAGE] merkintää.

HEIGHT ja WIDTH -attribuutit kertovat kuvan korkeuden ja leveyden. Tämä tieto on tärkeää graafisille selaimille, jotta ne osaavat varata kuville oikean kokoisen tilan ennen kuin kuva on haettu palvelimelta. Attribuuteilla voi myös suurentaa kuvaa antamalla kuvan kokoa suuremmat mitat. Älä käytä attribuutteja kuvan pienentämiseen. Pienennä kuvaa kuvankäsittelyohjelmalla, jolloin kuvan koko pienenee ja se latautuu nopeammin. Kuvan suurentaminen ei onnistu kaikilla selaimilla. HTML 3.2:n mukaan kuvakoko pitää ilmoittaa oikein.

ALIGN-attribuutilla vaikutetaan kuvan sijoittumiseen tekstin suhteen. BORDER-attribuutti määrittää kuvan ympärillä olevan kehyksen koon. Linkinä toimivan kuvan ympärille lisätään oletuksena kehys. Kehyksen saa pois BORDER=0 -määrityksellä. Tällöin on tehtävä käyttäjälle selväksi, että kuva toimii linkkinä.

HSPACE ja VSPACE attribuuteilla määritetään kuvan ympärille jätettävä tila. VSPACE kertoo ylä- ja alapuolelle, HSPACE oikealle ja vasemmalle puolelle jätettävän tilan.

USEMAP ja ISMAP kertovat, että kuva toimii kuvakarttana. ISMAP vaatii ohjelman www-palvelimella. USEMAP-attribuutti määrittää kuvaan käytettävän karttamäärityksen, joka tehdään MAP- ja AREA-koodein. USEMAP ei vaadi koodia www-palvelimelle.

Esimerkkejä

Kuva <IMG SRC="esim.gif"> tekstin seassa.<BR> Sama kuva. <IMG SRC="esim.gif" alt="[MV]" width=40 height=30> Nämä tiedot pitäisi olla kaikissa kuvissa.<BR> Nyt kuvan <IMG SRC="esim.gif" alt="[MV]" width=40 height=30 hspace=20> ja tekstin väliin jää enemmän tilaa.<BR> Kuva toimii linkkinä. <A HREF="index.htm"><IMG SRC="esim.gif" alt="[MV]" width=40 height=30></A><BR> Sama ilman taustaa. <A HREF="index.htm"><IMG SRC="esim.gif" alt="[MV]" width=40 height=30 border=0></A><BR> Teksti kuvaan <IMG SRC="esim.gif" alt="[MV]" width=40 height=30 align=middle> nähden keskellä. <BR> Kuva oikealla. <IMG SRC="esim.gif" alt="[MV]" width=40 height=30 align=right><BR>

Kuva tekstin seassa. Sama kuva. Nämä tiedot pitäisi olla kaikissa kuvissa. Nyt kuvan ja tekstin väliin jää enemmän tilaa. Kuva toimii linkkinä. Sama ilman taustaa. Teksti kuvaan nähden keskellä. Kuva oikealla.

MAP - Kuvakartta

MAP-koodien sisälle määritellään kuvan aktiiviset alueet AREA-koodein. NAME nimeää kuvakartan. Nimeä käytetään IMG-koodin USEMAP-attribuutissa.

AREA - Aktiivinen alue kuvassa

AREA-koodilla määritellään aktiiviset alueet kuvasta. Aktiiviset alueet toimivat linkkeinä. HREF-attribuutin määrittämään osoitteeseen. Tekstipohjaiset selaimet käyttävät ALT-tekstejä kuvakartan näyttämäiseen. Jos ALT-attribuutit jätetään pois. Selain näyttää tallöin pelkät osoitteet.

COORDS-attribuutti kertoo SHAPE:n määräämien alueiden koordinaatit. Koordinaattien muoto riippua SHAPE-attribuutin arvoista seuraavasti:

rect - neliö

Koordinaatit ovat neliön vasemman yläkulman ja oikean alakulman koordinaatit. Esim. COORDS="0,0,10,10" Määrittää neliön, jonka oikea yläkulma (0,0) ja vasen alareuna (10,10)

circle - ympyrä

Ympyrän koordinaatit kertovat ympyrän keskipisteen sekä halkaisijan. COORDS="10,10,5" määrittää ympyrän, jonka keskipiste on (10,10) ja säde 5.

poly - monikulmio

Monikulmiolle voi määrittää useita pisteitä, jotka yhdistetään luetellussa järjestyksessä toisiinsa. Koordinaatteja pitää olla parillinen määrä. Esim. COORDS="0,0,0,5,5,5" määrittää kolmion.

default - oletus

Oletusarvo ei vaadi koordinaatteja, vaan se määrittää mitä tekee sellainen alue, jolle ei ole määritelty aktiivista aluetta. Jos tällainen alue ei tee mitään, tulisi käyttää NOHREF-attribuuttia.

Esimerkkejä

<! -- Karttamäärittely -- > <MAP NAME="kartta"> <AREA SHAPE=rect COORDS="0,0,7,17" HREF="linkit.htm" alt="Linkit"> <AREA SHAPE=circle COORDS="17,7,5" HREF="#kuva" alt="Sivun alkuun"> <AREA SHAPE=rect COORDS="26,0,33,17" HREF="index.htm" alt="Listatt"> <AREA SHAPE=default NOHREF> </MAP> <! --Määrittelyä käyttävä kuva -- > <IMG SRC="mapesim.gif" width=34 height=18 border=0 alt="[< top >]" USEMAP="#kartta"><BR>