ohjeita web-sivuston tekijälle
Tässä luvussa tutustutaan kuvakarttojen eli imagemappien maailmaan.
Kuvakartta (interaktiivinen kuva), eli imagemap tarkoittaa kuvaa, jonka tiettyä kohtaa napsauttamalla pääsee ennalta määritellylle sivulle. Eli yksi kuva toimii usean linkin alustana. Tässä esitellään kuvakarttojen teoriaa.
Kuvakarttoja voi tehdä kahdella tavalla, joko palvelinpohjaisia tai Client Side Image Map -tekniikalla. Tässä perehdytään jälkimmäiseen, sillä se on huomattavasti helpompi toteuttaa. Selaimeksi vaaditaan Netscape Navigator 2.0 tai Microsoft Internet Explorer 2.0 tai uudempi.
Tietotekniikassa kuvatiedostot mitoitetaan pikseleinä. Se on tärkeä ymmärtää myös tässä vaiheessa. Kuvan tiettyä pistettä kuvataan X- ja Y-koordinaateilla. Origo (0,0) sijoitetaan kuvan vasempaan ylänurkkaan. Esimerkiksi piste 0,100 aivan kuvan vasemmassa laidassa 100 pikseliä yläraunasta. Vastaavasti 100,0 on kuvan yläreunassa 100 pikseliä nurkasta (edellyttäen että kuvan korkeus ja leveys on 100 pikseliä, eli kuvalla on kokoa vähintään 100 * 100 pikseliä).
Kuvien pisteiden koordinaatteja voi tutkia esimerkiksi Paint Shop Pro -ohjelmalla.
Kuvakartassa kuvatiedostoon määritellään alueita, joita naksauttamalla päästään tiettyyn osoitteeseen. Tässä käsitellään vain neliskulmaisia alueita, sillä käytännössä esimerkiksi ympyrän muotoisia aktiivisia alueita ei tarvita.
HTML-kieliopillisesti kuvakartan tekeminen on yksioikoista:
<map name="map">
Aluksi määritellään mapin nimi. Jos dokumentissa on useita mappeja, on niille annettava eri nimi.
<area shape="rect" coords="20,20,100,100" href="kohde-URL">
Annettu area-tagi määrittää neliön kohdasta 20, 20 (vasen yläreuna) kohtaan 100,100 (oikea alareuna). Jos 'kohde-URL':n tilalla olisi vaikkapa toinen.html, menisi kuvan ko. kohtaa painamalla selain tälle sivulle. On siis huomioitava, että kuvan kohdista tulee esille mihin sitä painamalla päästää.
</map>
Kun kaikki aktiiviset alueet on määritelty (esimerkissä vain yksi), lopetetaan varsinainen mappi tagilla </map>.
Tämän jälkeen tulee vielä määritellä käytettävä kuvatiedosto. Esimerkiksi:
<IMG SRC="kuva.gif" USEMAP="#map" border=0>
On tärkeää huomata, että mapin nimi on sama, kuin alussa määriteltiin. Border=0 -määrittelyllä poistataan reunus kuvakartan ympäriltä, joka tulee siihen oletuksena sen linkkiluonteen vuoksi.
Nyt tutkimme kuvakarttojen käyttöä esimerkin avulla. Tarkoituksena on käyttää oheista kuvaa kuvakarttana:
Esimerkin koodi näyttää seuraavalta:
<HTML> <HEAD> <TITLE>Kuvakartta</TITLE> </HEAD> <BODY> <H1>Esimerkki kuvakartan käytöstä</H1> <map name="navigaatio"> <area shape="rect" coords="0,0,149,49" href="main.html"> <area shape="rect" coords="150,0,299,49" href="info.html"> <area shape="rect" coords="0,50,149,99" href="linkit.html"> <area shape="rect" coords="150,50,299,99" href="palaute.html"> </map> <IMG SRC="mappi1.gif" USEMAP="#navigaatio" border=0> </BODY> </HTML>
Huomaa kuvakartan koorinaatit. Kun kuvan leveys on 300 pikseliä ja korkeus 100 pikseliä, on oikean alareunan koordinaatit 299,99. Vastaavasti vasen yläreuna on 0,0.
Selaimessa dokumentti näyttää seuraavalta:
Jos kyseeseen tulee tilanne, jossa imagemap on omassa kehyksessään ja siitä painamalla on tarkoitus avata viereiseen isompaan ruutuun sivu, tulee viittauksessa käyttää target-määrittelyä. Jos sivu on jaettu kahteen osaan, ja imagemapin sisältämä vasen puoli on nimeltään menu ja itse sivun 'lokero' on main ja halutaan ladata tiettyä aluetta painamalla vinkki.html, tulee käyttää seuraavaa <area>-määrittelyä: <area shape="rect" coords="20,20,100,100" href="vinkki.html" TARGET="main">Target-attribuutin kanssa tulee helposti virheitä, vaikka se onkin varsin yksiselitteinen. Kannattaa kiinnittää huomiota sen oikeaan käyttöön.
Seuraava sivu: Tyylipohjat.
:) JES! Opin taas uusia asioita!!! KIITTI!
11.5.2004 15:22jees. kiitoksia tästä sivusta oli tosi paljon hyötyä!
16.5.2004 18:47aion nyt opisekella- ja oppia :)
29.6.2004 15:51Wau... Oon aina halunnu sivuilleni kuvakartan, ja vihdoin osaan tehdä sen. Ja vielä noin lyhyillä neuvoilla!! ^^
27.7.2004 21:01Voisko joku kertoo:
Kun laitan taustakuvan. Miten saan sen niin, että se tulee taustalle vain YHDEN kerran, eikä montaa kertaa...!!!!????=?
Tyylipohjilla voidaan asetella taustakuvaa monella eri tapaa. Seuraavat tyylisäännöt määräävät taustakuvan esitettäväksi vain yhden kerran.
background-image: url('taustakuva.png');
background-repeat: no-repeat;
Lisää taustakuvista ja niiden asettelemisesta CSS2-spesifikaatiosta:
http://www.w3.org/TR/CSS2/colors.html#background-properties
mityen saa tälläsen jutskan??
29.11.2004 18:53hej, tartesin apuu ku mä teen sivuj et mite sen navigaation saa sivulle?
27.9.2005 23:08Mitä, jos haluaa, että linkistä avautuukin vain pieni-ikkuna,eikä koko ruutu. mikä olisis sen koodi!
5.11.2005 16:45minun pitäis saada kuva taustalle siellä on div lausekkeita paljon vaikuttaako ne. http://woody.cop.fi/~tomi.teirikangas/lan
voi käydä katsoa ja kommentoida sähköpostiin minkälainen on!!!
jess, tän kautta opin kai vihdoinkin mappaamisen jalon taidon 8D ihanaa, että joku jaksaa tehdä tällaisia sivuja, tulee monelle varmasti tarpeeseen.
27.11.2005 13:31Saimpas toteutettua nettiin joulukalenterin näillä ohjeilla. :D
17.12.2005 14:27Hei!
Miten saan tehtyä sillä tavalla, että kuva vaihtuu, kun sen päällä on hiiren kursori? (kuva toimii linkkinä) oman sivustoni sisällä.
<H1> moi </H1>
ei toimi?
Saaks taustakuvasta määriteltyä jonkin osan linkkikartaks?
8.7.2006 07:06En oikein vie käsitä noita koordinaateja.
23.7.2006 15:22Miten saan taustakuvan linkkikartaksi?
3.10.2006 13:12Eipä tunnu nykysellä firefoxilla pelittävän kuvakartat oikein, väittää koko kuvan olevan yksi linkki vaikka jaettu useaan osaan muttei kuitenkaan linkitä mihinkään.. Jos ymmärrätte :)
4.10.2006 13:23Hei,täällähän on hyvät neuvot vähän joka lähtöön,kiitos!!
Mutta itselläni on pulma,eli:Millaisilla html komennoilla saan border colorin(kuvan)värin joksikin muuksi kuin mustaksi???
Ja millaisella ohjelmalla saisin kuviini jotkut hienot kehykset ja mistä "raameja" löytyisi????
tuskin saa mitenkään kuvan reunuksia eri värisiksi kuin mustiksi HTML KOODILLA.
eli jos haluat nyt vaikka siniset kuva linkin reunukset niin muokkaat siihen kuvan ympärille vaan siniset reunukset esimerkiksi paintilla ellei sinulta muita löydy,
ja sitten poistat ne mustat reunukset siitä lisäämällä siihen html koodin perään sen border="0"
eli esim: <A HREF="index.html"><IMG SRC="jump12345.jpg"border="0"></A>
ja kuviin hienot kehykset saa tehtyä monellakin ohjelmalla mutta suosituimmat kuvankäsittely ohjelmat ovat Photoshop, Paint shop pro,
jotka molemmat ovat kyllä todella hinnakkaita. Mutta ilmaisiakin ammattitason kuvan muokkaus ohjelmia löytyy esimerkiksi Gimp joka tarvii toimiakseen GTK ohjelman. molemmat Gimpin ja ohjelman jonka se tarvii (GTK) löydät tuolta: http://gimp-win.sourceforge.net/
Jes, mahtavaa, uusi asia opittu! (Ja kauan haluttu asia...!)
29.3.2007 21:16öö... Tiedäthö miten sivuvalikkoja tehdään?? esim
_______________________________________
l l
(kuva linkki) l l
l l
(kuva linkki) l l
l (kuva näytetän tässä) l
l l
l l
l l
l l
----------------------------------------
?? emailaa terv. akke
Tekisin sivut kertoisko joku jonkun millä vois tehä?
Sais olla ilmanen.
Oma työskentelyni tyssäsi noihin koordinaattien määrittämiseen. En hallitse niitä ollenkaan...
18.11.2007 16:45Miten saa tietää missä kohta on mikäkin koordinaatti?
12.11.2008 22:58ohjelman gimp saa ilmaiseksi netissä, sillä on helppo tehdä näitä. ne koordinaatit voi hiirellä rajata.
20.1.2011 20:53Minä en saa tästä pätkääkään selvää, en ensinnäkään pikselikoosta, enkä mistään muustakaan, YÄH.
Tässä on niin paljon ja en osaa yhdistellä noita HTML - koodeja.
Noni.. Katsoin ja luin koko höskän.. Mutta en tiedä minne oikein noi koodit tai no pitää laittaa ja millaisella ohjelmalla tämä pitäisi tehdä???? Kokeilen vielä tulisiko tästä mitään mutt vastatkaa silti..