18 Kuvan leikkaaminen - Image Slicer

Aina i ole mahdollista tehdä kuvakarttaa tai sitten se ei vaan ole järkevää. Sellaisia tilanteita varten on olemassa "Image Slicer". Kuva siis pilkotaan osiin ja jokainen osa voi toimia vaikkapa linkkinä. Tai sitten jokin osa onkin animaatio. Äkkiseltään voi tuntua hassulta, että miksi joku tarvitsisi sellaista toimitoa kuin "Image slicer". Kuitenkin esim. www-suunnittelijat suunnittelijat suunnittelevat sivunsa usein kuvankäsittelyohjelmalla. Kun sitten kaikki on valmista grafiikka on hyväksytty niin on edessä grafiikan siirtäminen html-sivulle. Kaikkea ei välttämättä onnistuta tekemään "image mapilla". Esim. kuvakarttatekniikalla et voi tehdä painikkeita, jotka muuttuvat niitä painettaessa. Katso esim. Jäntevän sivua. Siinä on navigaatio tehty hyödyntäen "Image sliceria". Siis kun klikkaat esim. kohtaa miehet linkki aktivoituu ja teksti muuttuu vihreäksi. Kun klikkaat linkkiä niin teksti myös jää vihreäksi. Sellaista on madotonta toteuttaa imagemapilla.

Kuvan pilkkominen on myös sikäli hyvä toimenpide, että voit optimoida jokaisen kuvan erikseen. Siis kokonaisuutena kuva toimii jyvin vaikka osa kuvista olisikin pakattu tiiviimmin kuin muut.

Seuraavaksi teemme kuvan pilkkomisen eli "slaisaukksen" ohjelmalla Paint Sho Pro. Kohteena on alla oleva kuva, johon teemme navigaatiot oppitunneille 1 ja 2.



Valitse File ja sieltä Export ja sitten Image Slicer.



Seuraavaksi valiset työkalun "Slicer" eli sen työkalun joka muistuttaa veistä.

Sitten vaan alat leikellä kuvaa sopiviin palasiin. tarvittaessa voit siirtää kuvan näkymää työkalulla, joka muistuttaa kättä. Kun homma alaa olla valmista klikkaat nuolityökalua ja sen jälkeen klikkaat yksittäistä kuvaa. Syötä osoite kenttään, siis se osoite jonne päädytään kun klikataan kohtaa oppitunti 1. Aktiivinen kuva saa vihreän kehyksen.



Tee näin kaikille kuville. Paina lopuksi painiketta save. Lopputulos on, että olet tallentanut tiedoston, joka sisältää kuvan ja sen lisäksi kuvassa on interaktiivisia alueita. Kuva voi esim. toimia kuten tämä kuva tässä alla. Tai oikeasti siinä ei ole kuva vaan neljä eri kuvaa, jotka on yhdistetty. Kokeile esim. klikata kohtaa oppitunti 1. Takaisin tälle sivulle pääset painamalla selaimesta painiketta Back tai "Edellinen".