Oversikt verktøy

Startsiden
 

Lag bildekart med ImageMap filteret



I Gimp er det et filter som heter “Bildekart” (1.) (Filtre -> Web -> Bildekart), som du bruker til å lage bilder med linker i, til websider. (I noen versjoner av Gimp heter filteret "ImageMap" (Filter -> Nett -> ImageMap)).




1.



Filteret “Bildekart” er et tilleggsprogram med mange funksjoner(2). “Bildekart”-vinduet åpnes med bildet til det aktive bildevinduet(1).
Husk å lagre bildet først i bildevinduet (1) før du åpner “Bildekart”-filteret. Du bør også lagre selve bildekartet ofte underveis.




2.



Du kan nå markere hvilke områder i bildet ditt du vil bruke som link-knapper, ved hjelp av tegne verktøyene på venstre side i Bildekart-vinduet(3). I eksemplet under er tegne verktøyet for å lage firkantede markeringer valgt [1], og en firkantet markering er dratt ut rundt døren i bildet.
Velg hvilket tegne verktøy du vil bruke (firkantet, sirkelformet, eller egendefinert), og klikk én gang for å aktivere tegne verktøyet. Nå kan du dra ut markeringen til den størrelsen du ønsker. Klikk så én gang til med venstre musetast for å avslutte tegne verktøyet.
Da åpnes samtidig et vindu som heter “Innstillinger for området”(4). Om du klikker med høyre musetast avbryter du markeringen, og det blir ikke tegnet noe markeringsområde.




3.



I flipp arket som heter “Lenke” i “Innstillinger for område”-vinduet (4) velger du hvilken type link som skal åpnes når man klikker på området som er markert rundt døren. (Selve markeringen er usynlig, så når bildet blir lagt ut i en html-side og vises i en nettleser, vil det virke som om du bare klikker på tegningen av døren).
Forhåndsvalget er ”Annet” slik at du kan skrive inn kun navnet på en html-fil, eller bla fram til en html-fil du allerede har laget ved hjelp av “Velg html-fil”-knappen bak skrive-feltet til URL.

Kryss av i feltet for “Relativ lenke”. Da lagres kun navnet til html-fila som skal lenkes, og ikke også opplysninger om hvor den er lagret på datamaskinen din. Dette gjør det letter å flytte websiden med bildekartet ditt til en server på nettet, eller til en annen mappe på datamaskinen din.




4.



Velger du “Nettsted” som lenketype blir uttrykket “http://” lagt til fremst i URL-tekstboksen for å indikere at du skal fylle ut hele adressen til et nettsted eller en webside. Dette kalles en “absolutt lenke” fordi det er en nøyaktig adresse til en side som ligger ute på internett*).



*) Det er alltid lurt å lage lenker med relativ adresse innen din egen webside. Dersom du lager en hjemmeside som består av 3 html-sider, bør disse lagres i en egen mappe sammen med bildene som skal være på html-sidene, fordi dette gjør det enklere for deg å lage og endre på hjemmesiden din. Når alle filene (html-sider, bilder og gif-animasjoner mm.) lagres i samme mappe behøver du bare å skrive relative lenker i kildekoden til html-siden. Dette gjør det enklere og mer oversiktlig å skrive html-koden, og du kan flytte mappen med hjemmesiden din til en annen plass på datamaskinen din eller legge den ut på internett på en server, uten behøve å endre på html-koden.

Dersom du f.eks. har brukt absolutt lenke-adresse til bildet “sol.jpg” i hjemmesiden din ville denne lenke-adressen sett slik ut i html-koden din:

[img src = “/home/Min Hjemme katalog/Mine prosjekter/Hjemmeside katalog/sol.jpg”] (Linux)
[img src = “C:\Mine dokumenter \Mine prosjekter\Hjemmeside katalog\sol.jpg”] (Windows)


Dersom du nå flyttet mappen med hjemmesiden din til en annen datamaskin, ville ikke bildet “sol.jpg” bli vist i html-siden, fordi adressen til bildet som er oppgitt i html-koden ikke finnes på den nye datamaskinen: På sin vei ned til selve bildet får den nye datamaskinen beskjed om å lete etter mapper som ikke finnes på harddisken! Mappen “Mine prosjekter” finnes jo bare på din datamaskin fordi du har laget dem selv.

Dersom du hadde brukt relativ lenke-adresse til bildet “sol.jpg” i hjemmesiden din ville den sett slik ut:
[img src = “sol.jpg”]

Nå ville bildet bli vist i html-siden, selv om den hadde vært flyttet til en annen datamaskin, fordi html-siden alltid leter etter bilder ( og andre html-sider mm.) som er lenket med relativ adresse, i samme mappe som den selv ligger i. Bruk derfor alltid relative linker i html-koden slik at du lett kan flytte mappen din f.eks. til en server på internett.



Velger du “e-post” som lenketype blir uttrykket “mailto:” lagt til fremst i URL-tekstboksen for å indikere at du skal skrive en e-mail adresse, og bruke lenkeknappen i bildekartet til å åpne et e-mailprogram med. I feltet under URL-tekstboksen (Target frame name/ID) kan du skrive inn hvilken frame (ramme) lenken skal åpne html-siden i, dersom du bruker en html-side med frames.
En html-side som inneholder frames (rammer) er delt opp i to eller flere ulike html-sider, og ved hjelp av html-koden kan du bestemme i hvilken side nye sider skal åpnes.



Helt nederst er et felt som heter “Comment about this area”. Her kan du fylle ut en beskrivelse av linken, om du ønsker. Denne kommentaren blir lagt i bildekart-knappens “”-tagg, og vil bli vist istede for bildet dersom websiden vises i en nettleser som ikke viser bilder. I flipp arket som heter “Rektangel” i “Innstillinger for område”-vinduet(5) kan du justere markeringsområdet du tegnet med tegne verktøyet.




5.



Upper left x: Øker du verdien her flyttes markeringen til høyre. minskes verdien flyttes markeringen til venstre.
Upper left y: Øker du verdien her flyttes markeringen nedover. minskes verdien flyttes markeringen oppover.
Bredde: Her justeres bredden til markeringen.
Høyde: Her justeres høyden til markeringen.
Dersom du krysser av i ruten for “Forhåndsvisning” vises endringene du gjør på markeringen i bildet, mens du gjør dem.



I flipp arket som heter “Javascript” i “Innstillinger for område”-vinduet (6) kan du skrive inn javaskript-kode for musehendelsene “onMouseover” (når musepekeren føres over markeringsområdet) ,og “onMouseout” (når musepekeren føres ut av det markerte området), og for hendelsene “onFocus” og “OnBlur”. Javascript-koder for disse hendelsene kan du finne på internett eller i bøker om javascript, og dette er absolutt noe du bør titte nærmere på, for javascript kan gjøre websider både spennende og attraktive*).




6.



*) Du kan f.eks. bruke et javascript som åpner et lite vindu med informasjon om siden som linken åpner, når musepekeren føres over markeringsområdet:

I “onMouseover” -feltet (i javascript-flipp arket i “Innstillinger for området”-vinduet) skriver du denne javascript-koden: “msgopen()” (uten gåseøyne).
Skriv så inn navnet på URL 'en til linken i “Lenke”-flipp arket(4), og klikk på “Bruk” og “OK”. Tilbake i hovedvinduet (2) klikker du på “Fil” -> “Lagre”, og lagrer bildekartet som en html-fil slik: Min side.html.

Selve bildet lagres i Gimp's bildevindu. Husk å lagre både bilde og bildekart i samme mappe! Deretter åpner du html-dokumentet du lagret i Bildekart-vinduet, med en tekst editor (GEdit, VIM, Notepad o.l.). Hverken [html] , [head], eller [body] -taggene er oppført i html-fila, så disse taggene bør du skrive inn nå før du arbeider videre.

Først i [body]-taggen limer du inn dette javascriptet:




Lagre html-filen på nytt, og åpne den i en nettleser. Når du fører musepekeren over markeringsområdet i bildekartet, åpnes dette vinduet av seg selv (7):


7.


Legg merke til at det er teksten mellom gåseøynene bak de tre midterste “write”-kommandoene i javascriptet som gjengis i vinduet.




Når du har fylt inn den nødvendige informasjonen i “Innstillinger for område”-vinduet, klikker du på “Bruk” og “OK” for å lagre og lukke (6).



Markeringens nummer (#), form og url-adresse vises nå i “Valg”-ruten i Bildekart-vinduet (8). Om du klikker på linjen med informasjon om markeringen, blir markeringens linjer farget røde, og får røde flytte punkter som kan brukes til endre form og størrelse på markeringen (8).




8.



La oss se nærmere på verktøyene i Bildekart-vinduet. Helt til venstre i vinduet er tegne verktøyene som du bruker til å lage markeringsområdene med (9).




9.



Verktøyet “Velg eksisterende områder” bruker du til å flytte opprettede områder med. Om du klikker og drar i et område flytter du det samtidig som områdets røde flytte punkter(8) kommer til syne. Om du bare klikker på et område blir området markert med blått i “Valg- listen.

Verktøyet “Definér firkantet område” bruker du til å tegne firkantede områder med.

Verktøyet “Definér elliptisk område” bruker du til å tegne runde områder med.

Verktøyet “Definér polygon område” bruker du til å tegne områder med egendefinerte former. Dette verktøyet skiller seg litt fra de andre: Hver gang du klikker med venstre musetast lager du et punkt og dermed et nytt hjørne i det flersidete området. For å avslutte markeringen dobbeltklikker du med venstre musetast.

Verktøyet “Rediger info om område” brukes for å åpne “Innstillinger for område”-vinduet(4). Her kan du så endre url-link og andre egenskaper for området.

Verktøyet “Slett valgte område” bruker du til å slette et område du har valgt med “Velg eksisterende områder”-verktøyet.



Den øverste verktøy menyen (10) brukes til ulike ting:




10.



Med “Åpne bildekart fil” kan du åpne bildekart (html-fil) du har laget fra før av. Vær oppmerksom på at du bare åpner en html-fil med markeringsområdene og informasjonen om markeringsområdene. Bildet som tilhører bildekartet (som er en html-fil) blir ikke åpnet sammen med bildekartet.
Dersom du vil endre på bildekartet og samtidig se bildet som bildekartet tilhører, må du først åpne bildet i Gimp's bildevindu og så åpne “Bildekart”-filteret fra bildevinduet. Men dersom du bare skal endre informasjonen(4) til markeringsområdene i bildekartet (url, javascript, lenketype osv.) kan du gjøre dette uten å også åpne bildet til bildekartet.

Med “Lagre bildekart fil” lagrer du bildekartet som en html-fil (Slik: “MittBildekart.html”). Husk på at det du lagrer er bare en html-fil, med informasjon om hvor markeringsområdene ligger i bildet, størrelsen på markeringsområdene, link-informasjon til markeringsområdene, eventuelle javascript osv.
Når du har lagret bildekartet ditt som en html-fil, vil den se ut noe slikt som dette når du åpner den i en teksteditor (Kwrite, Gedit, eller Notepad):





Som du ser må du selv skrive inn de andre nødvendige html-taggene (html, head, body). Dette er nødvendig for å være sikker på at html-siden vises riktig i alle nettlesere.

Grunnen til at de andre html-taggene ikke blir skrevet inn i html-koden til bildekartet, er at det på denne måten er lettere å lime inn bildekart-koden i en allerede eksisterende webside. Dersom du f.eks. har laget deg en hjemmeside fra før av som du er fornøyd med, og som du ønsker å legge inn et bildekart i, er det lettere for deg å bare lime inn koden til bildekartet, når det ikke er andre tagger med i koden enn bare dem som tilhører selve bildekartet.

Når du lagrer bildekartfilen må du derfor passe på å lagre den i samme mappe som bildet til bildekartet.



Med “Brukervalg”(10) åpner du et vindu som heter “Generelle brukervalg”(11). Her kan du bestemme hvordan selve “Bildekart”-filteret skal oppføre seg og se ut.




11.



I flipparket “Generelt” bestemmer du hvordan ulike funksjoner i “Bildekart”-filteret skal brukes. Her kan du velge hvilken type bildekart du vil ha. Forhåndsvalget er CSIM, og dette valget må brukes for at bildekartet skal vises riktig i en webside (12).

Dersom du velger å ikke hake av i valget for “Spør etter område informasjon” vil ikke “Innstillinger for området”-vinduet(4) åpnes automatisk når du avslutter tegning av et område.

Dersom du haker av i valget for “Krever Forvalgt URL” må du fylle ut URL'en til markeringsområdene du oppretter før du lagrer bildekartet, men i standardtypen CSIM kan du godt la vær å fylle ut url'ene før du lagrer kartet, og fylle dem ut i den ferdige html-koden (12).

Dersom du haker av i valget for “Vis håndtak for områder” får markeringsområdene små røde firkantede hendler (8) som du kan bruke til å justere markeringenes størrelse med. Om det ikke er haket av i valget for dette vil ikke disse hendlene vises. Dette kan være nyttig dersom du har mange markeringsområder i et lite bildekart.

Bildekart-koden til de ulike karttypene:
(Bildets navn: “Uten navn”, kartnavn: “map”)




I valget “Show area URL tip” er det meningen at et url-tip (et lite vindu uten border) skal åpne seg under musepekeren når den føres over markeringsområdet, når bildekartet vises i en nettleser. Dersom du vil bruke denne funksjonen må du immidlertid selv skrive inn denne koden i html-koden til bildekartet.
Skriv inn TITLE = ”mitt url-tips” i “AREA SHAPE”-taggen slik: (eksemplet bruker CSIM-karttype)

[AREA SHAPE="CIRCLE" COORDS="142,79,29" HREF="side1.html" TITLE = “mitt url-tips”]

Når du nå fører musepekeren over bildekartet i en nettleser vil url-tipset vises slik (13):




13.



Dersom du haker av i valget for “Use double-sized grab handles” (11) gjøres de røde flyttehendlene til markeringsområdene større (14).




14.

 


I flipp arket “Meny” (15) i “Generelle brukervalg”-vinduet (11) bestemmer du antall ganger du kan angre handlinger i Bildekart-programmet (Number of Undo levels). Dette gjelder f.eks. flytting av markeringsområder og oppretting av nye markeringsområder, og ikke informasjon du fyller inn i f.eks. URL-feltene i “Innstillinger for område”-vinduene.




15.



I flipp arket “Farger” kan du bestemme fargene til den stiplede linjen til markeringsområdene (16).




16.



Dersom du klikker på fargefeltene åpnes et fargevelger-vindu hvor du kan velge dine egne farger.

Fargefeltene bak “Normal” viser fargene i den stiplede linjen til et markeringsområde som ikke er valgt, mens fargefeltene bak “Valgt” viser fargene i den stiplede linjen til et markeringsområde som er valgt.

Dette kan være nyttig dersom fargene i et bildekart gjør markeringslinjene vanskelig å se med standardfargene.


Dersom du vil angre en handling underveis i arbeidet med bildekartet ditt, f.eks. dersom du ikke ville flytte markeringen du nettopp flyttet kan du klikke på “Angre”-knappen på den øverste verktøy menyen (10). Da gjøres flyttingen om igjen, og markeringen flyttes tilbake til sin opprinnelige plasseringen der den var før du flyttet den. Det er også mulig å “angre på angringen” ved å klikke på “Gjenopprett”-knappen (10). I eksemplet vårt blir da markeringen flyttet tilbake igjen til den plasseringen den hadde før du angret. “Angre” og “Gjenopprett”-operasjonene kan også utføres på f.eks. oppretting av nye markeringer og endring på størrelsene av markeringer.

Men du kan ikke bruke “Angre” og “Gjenopprett”-funksjonene på URL'er og bildekartnavn som du har fylt inn ved hjelp av tekst. Dersom du angrer på en URL du har fylt inn i url-adressefeltet i “Innstillinger for område”-vinduet, må du selv fylle inn en ny URL.



“Info om bildekart fil”-knappen (10) åpner “Innstillinger for bildekart”-vinduet (17).




17.



“Filnavn” forteller navnet til bildekartet og hvor det er lagret. På illustrasjonen (17) har ikke bildekartet blitt lagret ennå, og derfor kalles bare bildekartet for “”. Dersom bildekartet hadde vært lagret ville navnet og fil banen til bildekartet stått her (f.eks. “/home/andre/Mitt bildekart.html”).

På samme måte er navnet til bildet som benyttes i bildekartet oppgitt bak “Navn på bilde”. Dersom du klikker på knappen med mappe på, bak tekstboksen til “Navn på bilde”, åpnes et vindu hvor du kan velge fra harddisken hvilken bilde du vil sette inn i bildekartet ditt. Du trenger altså ikke å bruke det bildet som du opprinnelig åpnet bildekart-filteret fra i Gimp. På denne måten fungerer bildekart filteret som et uavhengig enkeltstående program utenfor Gimp.

I tekstboksen bak “Tittel” skriver du inn navnet på bildekartet ditt. Dette navnet trenger ikke noen html-endelse, men er et referansenavn kun til bildekartet som brukes inni html-koden (se ill. 12). Navnet bak “Forfatter” er som regel navnet ditt; på Linux-systemer henter bildekart filteret navnet til den som er logget på. Om du ønsker kan du selvfølgelig endre forfatternavnet til noe annet. Forfatternavnet blir satt inn i html-koden i “AUTHOR” kommentar-taggen (12).

I tekstboksen bak “Forvalgt URL” kan du skrive inn en url-adresse som gjør hele bildekartet til et markeringsområde. Vær oppmerksom på at denne funksjonen bare passer til bildekart som er designet slik at brukeren ser tydelig hva som er markeringsområder med URL-linker (18). Dersom denne funksjonen brukes i bildekart hvor det ikke tydelig går frem hva som er klikkbare områder (19), vil brukeren ikke finne ut at det finnes flere markeringsområder i bildekartet, fordi musepekeren endres til en pekehånd så snart den føres over selve bildet.




18.

 

19.



Dersom du bruker funksjonen “Forvalgt URL” blir denne URL-adressen satt inn til slutt i html-koden til bildekartet slik:

[AREA SHAPE="DEFAULT" HREF="sideOne.html"]

I feltet for “Beskrivelse” kan du skrive inn en beskrivelse av bildekartet, eller andre notater. Det du skriver her blir satt inn i html-koden i en kommentar-tagg under “Author” kommentar-taggen (12):

[!-- #$DESCRIPTION:Dette er mitt eget bildekart. --]



I “Map file format” kan du bestemme hvilke bildekart-type du vil bruke, men dersom du vil bruke bildekartet ditt i en webside må du bruke CSIM-formatet (12), som er standardvalget når du åpner bildekart filteret. “Innstillinger for bildekart”-vinduet kan du også åpne via vindu-menyen (29).

Knappene “Send markeringsområde fram” og “Send markeringsområde bak” (10) bruker du til å flytte markeringsområdene framover og bakover dersom de overlapper hverandre. I illustrasjon 20 er den røde runde markeringen plassert over (foran) den blå firkantede. Dersom du vil at den blå markeringen skal ligge over (foran) den røde, velger du den blå markeringen ved å klikke på den, og så klikker du på knappen “Send markeringsområde fram”. Da blir den blå markeringen lagt øverst (21).




20.

 

21.



Du kan legge et rutenett over bildekartet (22) ved å klikke på “Rutenett”-knappen på den øverste verktøy menyen (10), eller ved å bruke vindu-menyen (29).




22.



Rutenettet blir ikke lagret sammen med bildekartet, og er bare til bruk under arbeidet med bildekartet. Rutenettet gjør det lettere å plassere markeringsområder i forhold til hverandre dersom du f.eks. vil ha plassert markeringsområdene på samme linje etter hverandre og over hverandre.
Du kan justere rutenettet etter dine egne behov ved å velge: Godsaker -> Innstillinger for rutenett på hovedmenyen til bildekart filteret (23), for å åpne “Innstillinger for rutenett”-vinduet (24). Eller du kan bruke vindu-menyen (29).




23.




24.



Dersom du har slått på rutenett-funksjonen ved hjelp av “Rutenett”-knappen i verktøy menyen, når du åpner “Innstillinger for rutenett”-vinduet vil “Snap-To Grid Enabled” være valgt slik som ill. 24 viser. Dersom du ikke har slått på rutenett-funksjonen før du åpner “Innstillinger for rutenett”-vinduet, må du hake av for “Snap-To Grid Enabled” og “Forhåndsvisning” for at rutenettet skal bli lagt over bildekartet.


I “Type og synlighet for rutenett” velger du om rutenettet skal vises som kryssende linjer over bildekartet (22), om det bare skal vises som kryss (25), eller om det ikke skal vises i det hele tatt. I “Grid Granularity” bestemmer du bredden og høyden på rutene i rutenettet, og “Avstand til rutenett” angis avstanden fra bildekartets venstre ytterkanten til rutenettets venstre kant (piksler fra venstre), og bildekartets øverste ytterkant til rutenettets overkant (piksler fra toppen). Illustrasjon 26 viser et rutenett som er flyttet 40 piksler fra venstre, og 40 piksler fra toppen.



25.




26.



“Godsaker”-menyen (23) gir også adgang til en annen nyttig funksjon i bildekart filteret; nemlig “Opprett guider”-funksjonen.




27.



Når du velger “Opprett guider...” fra “Godsaker”-menyen åpnes “Opprett guider”-vinduet (27). Når du oppretter guider lager du mange markeringsområder på én gang, og alle disse markeringsområdene får samme størrelse. Dette er en nyttig funksjon dersom du hurtig trenger å opprette mange markeringsområder som må ha nøyaktig samme størrelse, f.eks. i en pen navigasjons meny til en webside.

Image dimensions angir bildekartets størrelse, og Resulting Guide Bounds viser koordinatene til det første markeringsområdets øverste venstre hjørne (1,1), og koordinatene til det siste markeringsområdets nederste høyre hjørne (104,104). I parentes står det oppgitt antall markeringsområder (4 areas).

Bredde angir hvert markeringsområdets bredde, og Høyde angir markeringsområdenes høyde. Horz. Spacing angir den vannrette avstanden mellom markeringsområdene, mens Vert. Spacing angir den loddrette avstanden mellom markeringsområdene. Left Start at angir hvor mange piksler første markeringsområde skal plasseres fra bildekartets venstre kant, og Top Start at angir hvor mange piksler den første markeringen skal plasseres fra bildekartets øvre kant.

No. Across angir hvor mange markeringsområder som skal opprettes bortover mot høyre, mens No. Down angir hvor mange markeringsområder som skal opprettes nedover. Illustrasjon 28 viser hvordan guidene blir seende ut med verdiene i “Opprett guider”-vinduet fylt ut som i illustrasjon 27. Fyller du ut en URL-adresse i Basis-URL, får alle markeringsområdene denne url-adressen.




28.



Du kan også få tilgang til Guide-funksjonen via vindu-menyen til bildekart filteret (29).




29.



Å kunne se kildekoden til bildekartet underveis kan være nyttig, for å sjekke om bildekartet vil bli vist riktig i en nettleser. Gå til Vis -> Kilde... på fil menyen for å åpne “Vis kilde”-vinduet (31).




30.




31.



Til venstre for område listen (Valg-listen for markeringsområdenes url-adresser) er område listens verktøy meny (32).




32.



Knappene “Rediger markeringsområde” og “Slett markeringsområde” fungerer på samme måte som i verktøy menyen helt til venstre i bildekart filterets programvindu.

Knappene “Flytt opp markeringsområde-info i Valg-liste” og “Flytt ned markeringsområde-info i Valg-liste” forholder seg bare til markeringsområde-info'ene i område listen. Dersom du f.eks. flytter et markeringsområde opp i område listen blir ikke selve markeringsområdet liggende over de andre markeringsområdene slik som er tilfelle når du bruker “Send markeringsområde fram”-knappen.

Rekkefølgen til markeringsområdene i område listen er den som blir vist i html-koden til bildekartet. Dersom du justerer rekkefølgen til markeringsområdene i område listen slik at den passer den virkelige rekkefølgen til markeringsområdene i bildekartet, blir det lettere å lese og se hvilke url-adresser som passer til de ulike markeringsområdene når en prøver å se dette i html-koden.