(Avansert) IKT-ferdighet: lage trykkfølsomt bilde

I dag fikk jeg et spørsmål fra den eldste som satte meg på å skrive dette blogginnlegget; hun ønsket å ta et kartutsnitt og markere der hun hadde dykket og legge det på bloggen sin. Deretter skulle lesere kunne trykke på de aktuelle områdene og komme til blogginnlegget som var knyttet mot hvert enkelt område. Med andre ord – hun ønsket et trykkfølsomt bilde. Hennes resultat finner du på denne lenka (sjekk gjerne ut undervannsfilmen fra Fimreite..)

Dette er kanskje en ferdighet man ikke trenger så ofte, men som kan være grei å kunne. Jeg har derfor laget en gjennomgang og viser med et eksempel under – og selv om dette ser omfattende ut er det bare fordi det krever mye å skrive en forklaring, å gjøre det i praksis er mye lettere (jeg har kalt det avansert ferdighet fordi jeg ikke regner det som basisferdighet – ikke fordi det er vanskelig):

Det første jeg gjør er at jeg åpner bildet i Paint – dette gjør jeg for å finne koordinatene jeg trenger. I dette eksempelet har jeg brukt rektangler (dvs de er vel mer kvadrater) og da må man angi øverste venstre og nederste høyre hjørne i firkanten. Dette finner jeg ved å føre musa over der hjørnene skal være og lese av nederst i høyre hjørne i programmet – slik dere ser på bildet til høyre, der er f.eks koordinat i nederste høyre hjørne 158,159 for firkanten som omgir fargepaletten i dette bildet. Disse tallene trenger jeg får å lage et kart over de ulike områdene (du kan nesten si at jeg legger et gjennomsiktig ark over bildet jeg bruker og på dette arket har jeg markert ut områder som skal være trykkfølsomme)

Kartet lager jeg med <map>-elementet i mitt eksempel, og for bildet i bunnen av innlegget ser det ser slik ut:

Koordinatene står i x,y-rekkefølge (først øvre venstre hjørne x,y og så nedre høyre hjørne x.y) hvor x er avstand fra venstre bildekant mot høyre, og y er avstand fra topp. I mitt eksempel er (som dere ser) tall nr 2 likt for alle – alle har lik høyde fra toppen, mens hvor langt inn varierer naturlig nok. Tall nr 3 viser avstand fra bildekant i nedre høyre hjørne, og dette blir da det samme som avstand inn for neste i rekkefølgen i øvre venstre hjørne osv siden jeg har lagt disse firkantene tett ved siden av hverandre (fire firkanter som ligger tett horisontalt utgjør fire trykkfølsomme områder i mitt eksempel). Det siste tallet er likt hos alle, dette er avstand fra topp og til nederste høyre hjørne. OBS: husk å måle på et bilde i riktig størrelse – hvis du senere endrer størrelsen vil du få feil trykkfølsomme områder.

Dette er et kart for de fire øverste, skal man ha for de fire under fortsetter du bare med <area shape…osv>. Koordinatene skrives inn i den rekkefølgen du finner dem – først marker øvre venstre hjørne og les av, deretter nedre høyre og les av. Shape angir formen og i dette eksemplet er det en firkant vi snakker om (rect). Href er hvor du skal sende leseren når han trykker på det området – jeg har valgt å sende til pdf som omhandler samme tema; for fargepaletten kommer man til pdf om PicPick, forstørrelsesglass til Virtual Magnifying Glass og de to siste til hhv pdf om å finne lyd og bilder man kan bruke (så det var jo ikke så veldig spennende eksempel…). Bildeområdet fungerer derfor som en lenke til der du vil sende leseren på samme måte som andre lenker, og du kan lenke til alle andre typer nettsider.

 Det er viktig å starte med <map> og avslutte med </map> for å lukke. Du angir også et navn og det er valgfritt hva du vil bruke – jeg har brukt test som navn på dette map-elementet. Husk alle anførselstegn og klammer – ellers blir det feil.

Man kan velge andre former enn firkanter også; for sirkler skriver man circle (der det står rect i eksemplet over) og bruker tre koordinater – midten av sirkelen (to koordinater) + hva slags størrelse den skal ha (hvor mange piksler “bred” den skal være, radius). Man kan også lage en mangekant og skriver da polygon der det står rect i eksemplet over etterfulgt av koordinater for alle hjørnene i polygonet – dette kan du derfor bestemme selv hvor mange kanter skal ha).

Når du har kommet så langt er det på tide å f.eks bruke koden på blogg, i LMS eller på en annen nettside. I denne bloggen velger jeg å lage nytt innlegg og laster opp bildet under. Ved å se på HTML-taggen ser jeg at koden til bildet ser ut som bildet over, og jeg er da nødt til å gjøre følgende to ting:

sette inn usemap=”#test” i klammeparantes for img-element (der det står <img class…..>) for å si hva slags kart som skal brukes på dette bildet (title er det jeg har kalt hovedbildet når jeg lastet det opp, altså bildet jeg skal lage trykkfølsomt og usemap er hvilket kart jeg skal bruke – husk hashtag foran navnet). Deretter må jeg legge inn selve kartkoden/map-elementet og resultatet er at koden da vil se ut som bildet under (obs: dere ser ikke hele map-elementet, men alt som står tidligere i teksten skal være med. Jeg har markert det som er satt inn med gult). Pass på at </map> kommer helt til sist – når man skriver kode har det lett for at det automatisk settes inn sluttklammer med en gang (da ser det slik ut <map></map>) - og da virker det ikke.

Resultatet av dette ser dere på bildet under hvor altså de fire øverste symbolene er trykkfølsomme.