Kuvat Kuvia voi liittää xhtml-sivulle <img>-elementillä <object>-elementillä <input>-elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina <body>-elementin background-attribuutilla tai CSS:n background-ominaisuuksilla ICT01D 28.11.2005 Elina Ulpovaara 1. Selaimien tunnistamat kuvatyypit Selaimet tunnistavat kuvatyypit ovat jpeg sopii kuville, joissa on paljon värisävyjä valokuville gif sopii grafiikkaan sopii kuville, joissa suuria saman sävyisiä pintoja käyttää maksimissaan 256:ta väriä, tarvitsee väripaletin tunnistaa yhden värin läpinäkyväksi png sekä jpeg:n ja gif:n korvaavaksi kehitetty kuvaformaatti
2. Kuvan upotus sivulle: <img> <img>-elementillä liitetään dokumenttiin sisäinen kuva. <img>-elementti kertoo kuvan osoitteen ja mahdollisesti kuvaan liittyvää muuta tietoa. Strict-kielioppi ei salli <img>-elementtiä suoraan <body>-elementin alielementiksi. Sijoita kuva esim. <p>- tai <div>-elementin sisään. Elementillä on mm. seuraavat attribuutit: src kuvan sijainti pakollinen arvona annetaan osoite, josta selain lataa kuvan <img src="omena.gif /> alt kuvan sijaan näytettävä teksti pakollinen <img src="pallo.gif" alt="kuva omenasta /> longdesc pitkä kuvaus linkki kuvasta kertovaan tekstiin selain tuki heikkoa height ja width korkeus ja leveys Kannattaa aina ilmoittaa, tällöin selain varaa kuvalle paikan ja jatkaa lopun sivun lataamista. <img src="omena.gif" alt="kuva omenasta width="150" height="148 />
Elementtiin voidaan liittää myös seuraavat asetteluun vaikuttavat attribuutit (Loose): align tekstin sijoittuminen kuvaan nähden arvot: top : tasaa samalle tasolle kuvan ja rivin yläreunan middle : tasaa samalle tasolle kuvan keskikohdan rivin keskikohdan kanssa bottom : tasaa kuvan ja tekstin alareunat samalle tasolle left/right : tasaavat kuvan vasempaan/oikeaan marginaaliin ja teksti sijoittuu vastaavasti oikealle/vasemmalle puolella kuvaa. Jos tekstin kierto halutaan keskeyttää, katkaisukohdassa annetaan rivinvaihtokomento parametrillä clear="right/left". <br clear= left /> border reunan leveys (Jos kuva on linkkinä ja haluat linkin aiheuttaman reunan pois, anna kuvalle border-attribuutti arvonaan 0.) hspace kuvan ja muun sisällön välinen vaakasuora etäisyys eli vasemman ja oikean reunan leveys. vspace kuvan ja muun sisällön välinen pystysuora etäisyys eli ylä- ja alareunuksen leveys.
<img>-elementin align-attribuuttin eri arvot: (Loose) (Loose)
Align-attribuutti CSS:n avulla: img {float:left} img {float:right} <img.../> <p class= alku >Omenapuut kukkivat kesällä</p><p class= loppu>ja tuottavat makoisia hedelmiä syksyllä</p> Img {float:left}.loppu {clear:left} <img>-elementin border-attribuutti (Loose) <img>-elementille saa reunaviivat border-attribuutilla <img src= omena.gif" alt= omena width="70" height="70" border="4" /> border-attribuutin arvoksi annetaan reunaviivan paksuus reunaviivanväri yleensä sama kuin elementin tekstiväri jos kuva on linkkinä, reunaviivan väri on linkkitekstin väri linkkikuvasta saa reunan pois antamalla border= 0
Border-attribuutti CSS:n avulla: img {border-style: solid; border-width: 3px; border-color: green;} Img {border: solid 3px green} Border-style:n arvot: none solid double groove ridge inset outset <img>-elementin attribuutit hspace ja vspace: (Loose) Kuvan vasemmalle ja oikealle puolelle 20 px tilaa. Kuvan ylä- aja alapuolelle 20 px tilaa.
Hspace ja vspace-attribuutit CSS:n avulla: Kaikille kuvan reunoille (vasen,oikea, ylä ja ala) voi antaa erikseen marginaalit eli miten kuva sijoittuu ympärillä oleviin muihin elementteihin. img {margin-left: 20px; margin-top: 30px; margin-right:40px: margin-top:50px} Kaikilla sama: img {margin: 20px} 3. Kuva linkkinä Kuvaa voi käyttää yhtälailla linkkinä kun tekstiäkin. Linkkitekstin paikalle laitetaan <img>-elementti. <a herf="index.html"><img src="paluu.gif" alt="kotisivulle /></a> Sinisen kehyksen saa pois esim. CSS-ehdotuksella: <style type="text/css"> <!-- img {border-style: none} --> </style> tai pelkästään: border:none Loose: <img>elementtiin voi liittää attribuutin border= 0.
4. Taustakuvat XHTML-dokumentin taustakuva (Loose): Kuvaa voi käyttää sivun taustana. Tausta täytetään kuvalla siten, että kuvaa toistetaan sarakkeittain ja rivittäin selaimen ikkuna täyteen. Body-elementtiin lisätään background-attribuutti, jonka arvoksi annetaan kuvan osoite. <body background="taustat/omena.gif"> Taustavärit ja -kuvat CSS:n avulla: Elementin taustaväri Ominaisuus: background-color Arvoina värit red, rgb(255,0,0), #ff00000 transparent: isäntäluokka-laatikossa olevan tausta näkyy läpi body {background-color: yellow} p {background-color: rgb(204,204,204)} Koko dokumentin taustan väri on keltainen. Tekstikappaleen tausta on harmaa.
Elementin taustakuva Ominaisuus: background- image URL-osoite Koko dokumenttiin taustakuva body {background-image: url(omena.gif)} Taulukon taustalle kuva table {background-image: url(tausta.gif)} Taustakuvan toistaminen Ominaisuus: background- repeat Arvot: repeat toistetaan vaakasuunnassa: repeat-x toistetaan pystysuunassa: repeat-y ei toistoa, vain yksi kuva: no-repeat Toistetaan taustakuva pystysuunnassa: body {background-image: url(omena.gif); background-repeat: repeat-y}
Kuvan paikka ominaisuus: background- position taustakuvan sijainti elementin sisällä paikka mitataan vasemmasta yläkulmasta arvot mittayksiköt vasemmalta ylhäältä vasemmalta, jolloin pystysuunnassa kuva asettuu keskelle top, center, bottom, left, right (+yhdistelmät) prosentit: annetaan x%y%-arvoin Sijoitetaan taustakuva siten,että se on vaakasuunnassa 100px vasemmalta ja pystysuunnassa 200px ylhäältä. body {background-image: url(omena.gif); background-repeat: no-repeat; background-position:100px 200px}
Kiinteä taustakuva Normaalisti taustakuva siirtyy sisällön mukana, kun sisältöä liikutetaan vierityspalkin avulla. Ominaisuudella background-attachment voidaan kiinnittää taustakuva Arvot: vieritys:scroll kiinnitys:fixed Dokumentin taustakuva siirtyy vierityksen mukana: body {background-image: url(tausta.gif); background-attachment: scroll }