HTML-opas - Web Ohjelmoinnin perusteita - Kuvat - Kuvaesitys

Kuvat

Kuvagalleria | Kokonäytön kuvaesitys | Kuvan vaihtuminen | Taustakuvat | Taustavärit

Mitä olisivat internet sivut ilman minkäänlaisia kuvia? Eivätpä juuri mitään, ellei sinulla ole tosi painavaa ja mielenkiintoista sanottavaa (siksi laitan tähän nyt paljon kuvia). Ja sen kaiken voit tehdä myös kuvien avulla ja myös pelkästään niillä!
Kuvan lisääminen WWW-sivulle tapahtuu <IMG SRC="kuvan_nimi.gif"> koodilla. Tätä koodia ei tarvitse lopettaa. Oletuksena kuva sijoittuu sivun vasempaan reunaan alkuperäisessä koossaan. WWW-sivuilla voidaan käyttää joko gif, jpg tai png tyyppisiä kuvia. Älä laita samalle sivulle kovin montaa kuvaa (max. 3-5), riippuen kuitenkin kuvien tiedostokoosta.

Kuvan lisäys <IMG SRC="kuva.gif"> -koodille voi antaa seuraavia lisämäärittelyjä:

ALT Kuvan selitysteksti, joka näkyy kuvan paikalla kuvan latautuessa. Tämä teksti tulee näkyviin myös silloin, kun osoitetaan kuvaa hiirellä hetken aikaa. Usein "altiksi" kirjoitetaan kuvan nimi.

WIDTH Kuvan leveys pikseleinä. Tämä kannattaa aina määritellä, sillä tällöin selain voi varata kuvalle oikean kokoisen tilan jo ennen kuvan lataamista. Sivun latautuminen nopeutuu näin jonkin verran.

HEIGHT Kuvan korkeus pikseleinä. Tämä kannattaa myös aina määritellä, sillä tällöin selain voi varata kuvalle oikean kokoisen tilan jo ennen kuvan lataamista. Tämä vaikuttaa myös sivun latautumiseen.

BORDER Kuvan reunuksen paksuus. Jos arvoksi asetetaan 0, ei kuvalla ole lainkaan reunusta.

ALIGN Tällä määritellään kuvan paikka sekä tekstin sijoittuminen suhteessa kuvaan (jos tekstiä on). Mahdollisia arvoja ovat:
     Left Kuva sijoitetaan sivun vasempaan laitaan ja teksti sijoittuu kuvan oikealle puolelle.
     Seuraavat rivit sijoittuvat ensimmäisen rivin alle kuvan oikealle puolelle.
     Right Kuva sijoitetaan sivun oikeaan laitaan ja teksti sijoitetaan kuvan vasemmalle puolelle.
     Seuraavat rivit sijoittuvat ensimmäisen rivin alle kuvan vasemmalle puolelle.
     Top Tekstin ensimmäisen rivin korkeimman kirjaimen yläreuna asetetaan samalle tasolle kuvan
     yläreunan kanssa. Seuraavat rivit sijoittuvat kuvan alapuolelle.
     Middle Tekstin ensimmäisen rivin alareuna sijoittuu samalle tasolle kuvan keskikohdan kanssa.
     Seuraavat rivit sijoittuvat kuvan alapuolelle.
     Bottom Tekstin ensimmäisen rivin alareuna sijoittuu samalle tasolle kuvan alareunan kanssa.
     Seuraavat rivit sijoittuvat kuvan alapuolelle.

HSPACE Tällä määritellään paljonko kuvan ympärille jätetään tyhjää tilaa vaakasuunnassa. Luku ilmoitetaan pikseleinä.

VSPACE Tällä määritellään paljonko kuvan ympärille jätetään tyhjää tilaa pystysuunnassa. Luku ilmoitetaan pikseleinä.

Esim. <IMG SRC="suomenlippu.gif" width="52" height="28" hspace="20" vspace="5" border="0" align="left" alt="Suomenlippu">

Taustakuvan lisääminen tapahtui <BODY> koodissa. Esim. <BODY background="kuva.jpg">.
Taustakuvan on hyvä olla tekstiä "himmeämpi", jottei se haittaa tekstin lukemista.
Taustakuva toistaa itseään sivulla, ellei sitä erikseen määritellä esim. JavaScript koodilla:
<script language="JavaScript1.2" type="text/JavaScript"> if (document.all||document.getElementById) document.body.style.background="url('kuvan_nimi.gif') white center no-repeat fixed"
</script>
Scripti sijoitetaan sivun body osaan ja sitä käytettäessä ei itse body koodiin tarvitse määritellä taustakuvaa. Toimii IE:ssä.
Tämän voi tehdä myös tyylimäärittelynä. Head osaan:
<style type="text/css">

</style>
Käy katsomassa myös erilaisia taustakuvia ja taustavärejä sivut.

Välillä kuva ei syystä tai toisesta näy, jolloin selaimen näytölle ilmestyy vasemmalla olevan punaisen rastin kuva (ie selain). Tarkista tällöin kuvan nimen oikeinkirjoitus (mm. ei ääkkösiä), tiedostopolku ja kuvan tallennusmuoto (gif, jpg tai png). Isot / pienet kirjaimet: Esim. "Kuva.gif" on eri asia kuin "kuva.gif" samoin kuin "kuva.GIF" ja "kuva.gif" jne. Kotikoneella kirjainkoolla ei ole vaikutusta kuvan näkymiseen, mutta useimmilla servereillä kyllä. Tarkista myös että olet siirtänyt kuvan palvelimelle.

Kuvan vaihtuminen toiseen

Rautalankanäytöllä ja erikoisnäppäimistöllä varustettu tietokoneeni

Kuvan vaihtuminen toiseen kuvaan hiiren kursorin ollessa kuvan päällä.
<A HREF="osoite.html"
onMouseOut = "document.pic.src='kuva1.gif'"
onMouseOver = "document.pic.src='kuva2.gif'">
<IMG SRC="kuva1.gif" BORDER=0 NAME="pic" align="right"> </a>

Koodiin voidaan liittää kolmas kuva, joka näkyy hiiren ollessa pohjassa.
<A HREF="osoite.html"
onMouseOut = "document.pic.src='kuva1.gif'"
onMouseOver = "document.pic.src='kuva2.gif'"
onMouseDown = "document.pic.src='kuva3.gif'">
<IMG SRC="kuva1.gif" BORDER=0 NAME="pic" align="right"> </a>

Jos haluat että kuva ei ole linkki, sijoita onMouse komennot kuvan lisäys tagin sisään.

<IMG SRC="kuva1.gif" BORDER=0 NAME="pic" align="right"
onMouseOut = "document.pic.src='kuva1.gif'"
onMouseOver = "document.pic.src='kuva2.gif'">

Kokonäytön kuvaesitys

Heah osaan:
<script language="JavaScript" type="text/JavaScript">
function fullscreen(url)
{
window.open(url,"fullscreen","toolbar=0,scrollbars=0,menubar=0,location=0,resizable=1,directories=0,status=0,
fullscreen=yes,width=" + (screen.width) + ",height=" + (screen.height) + ",left=0,top=0");
}
</script>

Tee joka kuvalle oma html sivu. Kopio alla oleva koodi ja tallenna esim. Kokonaytto1.html, -2.html jne...

<html>
<head>
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=3)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Kokonäytön kuvaesitys</title>
<link href="style_kn.css" rel=stylesheet>

nextURL = 'kokonaytto2.html';		// Seuraavan html sivun nimi / osoite
timeout = 0;
paalla_img = new Image();		// Päällä ja paussi napit
paalla_img.src = "paalla.gif";
paussi_img = new Image();
paussi_img.src = "paussi.gif";

delay = 5000;
if (window.opener && window.opener.document.forms.settings)
{
	form = window.opener.document.forms.settings;
	delay = form.delay.value*1000;
}

function slide()
{
	timeout = setTimeout(next,delay);
}

function next()
{
	document.location.href=nextURL;
}

function setVal()
{
   colCount = 5;
   rowCount = 4;
   win = new Array ("w","h");
   avail = new Array ("w","h");
   obso = new Array ("w","h");
   imgSp = new Array ("w","h");
   headSp = 115;                      
   lablSp = 12;                       
   footSp = 35;                       
   ixMarg = 30;                       
   scrollSp = 16;                        
   addSpH = 40;                       
   addSpH = 0;                        
   addSpW = 0;

if (window.innerWidth)
	{
	win["w"] = window.innerWidth;
	win["h"] = window.innerHeight;
	}

else if (document.body.clientWidth)
	{
		win["w"] = document.body.clientWidth;
		win["h"] = document.body.clientHeight;
	}

else
	{
	win["w"] = screen.width - 25;
	win["h"] = screen.height - 115;
	}

obso["w"] = (ixMarg * 2) + scrollSp + addSpW;
   obso["h"] = headSp + lablSp + footSp + scrollSp + addSpH;

avail["w"] = win["w"];
   avail["h"] = win["h"];

}

function sizeImg(imgW, imgH)
{
   imgRatio = imgW / imgH;

function scaleWB() { tWidth = avail["w"]; tHeight = tWidth / imgRatio; }
   function scaleBW() { tHeight = avail["h"]; tWidth = tHeight * imgRatio; }

if (imgRatio >= 1)       
   {
      scaleWB();
      if (tHeight > avail["h"]) { scaleBW(); }
   }
   else
   {
      scaleBW();
      if (tWidth > avail["w"]) { scaleWB(); }
   }
}

</script>

</head>
<body id="slide" onload="slide()">

<table width="100%" height="100%" cellspacing=0 cellpadding=0>
<tr><td align="center"><a href="javascript:next()"><script type="text/javascript">
setVal();sizeImg(800, 600);
document.write('<img src="kuva1.gif" width="' + tWidth + '" height="' + tHeight + '" border=0 alt="">');
</script></a></td></tr>
</table>

<div id="navinapit"><table cellspacing=0 cellpadding=0 border=0><tr>

<td><a href="kokonaytto3.html"><img src="edellinen.gif" width=30 height=19 alt="Edellinen sivu" border=0></a></td>

<td><a href="javascript:playpaussi()"<>img src="paussi.gif" width=30 height=19 name="playpaussi" border=0 alt="Pysäytä / Jatka"></a></td>

<td><a href="javascript:window.close()"><img src="sulje.gif" width=30 height=19 border=0 alt="Sulje sivu"></a></td></table></div>

<div id="kuvatekstin_varjostus">Ensimmäisen kuvan teksti tähän.</div>
<div id="kuvateksti">Ensimmäisen kuvan teksti tähän.</div>

</body>
</html>

Lataa tästä myös pieni tyylitiedosto style_kn.css, jota voit muutella mielesi mukaan.
Sekä kopioi navigaatiota varten seuraavat gif kuvat; edellinen, paalla, paussi ja sulje

.
Tai tietenkin on parempi ja välttämätöntäkin tehdä omat, tarpeisiisi sopivammat navikuvat.

Kuvagalleria

Pieni kuvagalleria scripti. Kuvista kannattaa tehdä kahdet versiot, isot ja pienet kuvat. Varsinkin jos käytät tiedostokooltaan suuria kuvia, näin kuvien latausaika on pienempi. Isompien kuvien koko tässä esimerkissä on 250 x 150 ja pienten thumnail kuvien 75 x 45. Voit käyttää minkä kokoisia kuvia itse haluat.

Kuvagallerian aloituskuva haluttuun näyttöpaikkaan:
<img src="aloituskuva.jpg" border="0" name="imagePoster" width="250" height="150" alt="Kuvagalleria">

Pikku kuvien eli thumnailien scripti on:
<a href="kuva1_iso.jpg" onClick="return(loadPosterImage('kuva1_iso.jpg'))"> <img border="0" src="kuva1_pieni.jpg" width="75" height="45" alt="1. kuva"></a> ...ja niin edellen...

Mistä sitten kuvia sivuille? Jollet ole vielä ehtinyt tehdä omia kuvia, niin netissä on paljon sivustoja joilta saa kopioida vapaasti esim. animaatioita, kuvia ja taustoja.
Windowsin Paint apuohjelmallakin voit piirtää kuvia. Tallentaessasi kuvaa valitse tallennus muodoksi joko gif tai jpg. Paintin kuvien laatu tosin ei ole kovin hyvä.
Kuvankäsittely ohjelmista Adoben PhotoShop on omaa luokkaansa, mutta ei todellakaan halpa. Edullisempia ja ilmaisiakin netistä löytyy. Tässä muutamia linkkejä:

Animaatiota ja kuvia:
Animationcity
Clipart
Coolarchive
Freegraphics
Njet.net
Theshockzone

Ohjelmia:
GIF Movie Gear 3.0
Irfanwiever
PaintShopPro
The Gimp
Tucows

Kuvankäsittely oppaita:
Digitaalinen kuvankäsittely
PaintShopPro vinkit
PhotoShop opas
Pieni kuvankäsittelyopas
Ratolin PhotoShop6 opas

Tekijänoikeuksista:
Armi Hölttö
Jukka Korpela
Kopiraitti
Kuvasto ry
Suomen ÄKT
Teosto

Vierailijoiden lkm 12/5 -04 lähtien: 274896 kpl.

Online 6.

Sivulataukset 9/7 -04 lähtien: 5181783 kpl.

Johdanto Ohjelmat Koodeja Kuvat Taustakuvat Taustavärit Linkit Listat Lomakkeet Php-palaute Taulukot Tyylit Kehykset Äänet Kotisivutilaa Domain osoite Metakone Hirsipuu Lisää linkki Päivänvitsi Suosittele Vieraskirja Lähetä kortti

Mietelause: Rypyt ovat perinnöllisiä. Vanhemmat saavat niitä lapsistaan.

Helen Hayes