2.12 Kuvat

Kuvan lisääminen web-sivulle on linkin jälkeen hyvin helppoa:

<img src="http://tähän.osoite.mistä.se.kuva.löytyy">

src tulee englanninkielen sanasta source

src-sanan jälkeen yhtäkuin-merkki ja sen perään lainausmerkkien sisään kuvan URL. URL voi olla kuten linkkien yhteydessä absoluuttinen osoite alkaen http://... tai sitten osittainen osoite.

Kuvan tunnisteella on muitakin attribuutteja kuin tuo src. Tässä niistä keskeisimmät:

<img src="../pics_ext/download.jpg" 
     width="100" 
     height="100" 
     alt="download-kuva" 
     border="0">

Width- ja height -attribuuteilla voit muuttaa kuvan kokoa näytöllä. Se ei pienennä tai suurenna tiedoston kokoa eikä rajaa kuvaa, vaan venyttää tai kutistaa kuvaa halutun kokoiseksi. Pikselikokojen ohessa voit käyttää prosenttiarvoja (width="50%". Tällöin kuvan leveydeksi (tai korkeudeksi) tulee tietty prosenttiosuus käytettävissä olevasta tilasta. Se ei siis tarkoita että esim. arvolla 50% kuva kaventuisi puoleen alkuperäisestä, vaan että kuva on tasan puolet sivun leveydestä.

Alt-attribuutti on vaihtoehtoinen (alternative) kuvaus kuvan sisällöstä. Tätä käytetään silloin kuin selain ei syystä tai toisesta näytä kuvia, tai kun pistät hiiren kuvan päälle ja annat olla sen siinä sekunnin tai kaksi, näytölle ilmestyy tuo alt-määritteen teksti. Kokeile!

Alt-määritettä suositellaan käytettäväksi aina, sillä maailmassa on yhä selaimia jotka eivät näytä kuvia lainkaan (tekstipohjaiset selaimet) sekä siksi, että esim. mobiililaitteita käytettäessä selailu nopeutuu moninkertaisesti, jos selainta pyydetään olemaan lataamatta kuvia. Näissä tilanteissa kuvan sisällöstä ei ole mitään tietoa ellei alt-määritettä käytetä.

Border-attribuutti määrittää, kuinka paksu reunus kuvan ympärille laitetaan. Nollalla reunusta ei tule lainkaan, 1 yhden pikselin paksuinen reunaviiva ja niin edelleen.

Kuvien käyttö painikkeina

Webissä on tullut (ehkä liiankin) yleiseksi tavaksi tehdä sivuista graafisesti hienomman näköisiä pistämällä ne täyteen kuvia. Useat painikkeet ja linkit korvataan kuvilla, jolloin sivusta saadaan tosi hienon näköinen, mutta sivun latautuminen hidastuu. Toinen haittapuoli on edellämainittu kuvittomien selainten käyttö - jos noita alt-määritteitä ei käytä, ei sivua voi oikein lukea eikä siitä siirtyä haluttuun linkkiin koska käyttäjä ei sitä löydä. Siksi on parempi ottaa käyttöön periaate, että AINA pistetään noihin kuviin alt-määrite kertomaan sanallisesti, mitä kuva pitää sisällään.

Tuollaisen kuvan käyttäminen painikkeena on varsin helppoa:

<a href="http://www.w3.org/">
	<img src="../pics_ext/home.gif" alt="to_homepage">
</a>

<a href="mailto:juupasjoo@domain.fi">
	<img src="../pics_ext/email.gif" alt="email_to_me">
</a>

**