ImageMapper
Hur du skapar flera länkar inuti en bild genom att använda
Image Mapper i Paint Shop Pro.
Ha din bild öppen i PSP.
Detta är min utgångsbild där jag ska lägga länkar på knapparna.
1) File - Export - Image Mapper, det ser ut så här när fönstret
öppnar sig. Ändra till GIF vid format om du ska spara din bild som
en GIF-bild, du kan ändra vid Optimize Image hur du vill att bilden
ska komprimeras.
Vid tools ser du olika knappar, för muspekaren över dem
så får du info om dem. Klickar du på ögat kan du förhandsgranska
din bild i Internet Explorer, du ser hur länkarna fungerar när du har skapat dem och
innan du sparar alltihopa.
2) Nu ska jag skapa länken till @-knappen
Jag väljer Cirkel-knappen och drar ut den där jag vill ha länken.
Hamnar cirkeln lite fel så använd Mover, knappen med pilar åt 4 håll och dra den
på plats.
Här skriver du in koden för mail-länken
vid URL skriver du mailto:dinmailadress
vid Alt skriver du text som ska visas när muspekaren förs över länken.
3) Dags för nästa länk
Eftersom mina knappar är runda så blir det bara cirkelverktyget jag använder,
men har du annan form så har du de andra alternativen att välja bland.
Nu drar jag ut en ny cirkel, det är den gröna, den jag skapade tidigare är röd.
Och vid URL skriver jag http://sökvägen till sidan som vanligt.
Vill du att sidan ska öppnas i nytt fönster utan bakåtknapp väljer du target:_blank
När du har gjort klar dina länkar så förhandsgranska genom att klicka på ögat
till vänster. Bilden öppnas i IE och du kan testa länkarna att de fungerar.
Gör de inte det kan du enkelt ändra i Image Mapper vid URL.
4) När jag är klar med mina sökvägar ska jag spara det jag skapat.
Save As... Det är 2 filer som man sparar ned.
Bläddra till en lämplig mapp, du ska spara båda filerna i samma mapp.
Här skapas först ett html-dokument som innehåller koden som hänvisar till länkarna.
Jag har döpt det till "imapp", och filen blir då imapp.htm
Nästa fil att sparas är själva bilden och den sparar du i samma mapp
som föregående fil.
Jag döpte min till intf.gif
Stäng ner Image Mapper nu är det klart. Stäng ner PSP.
Hur du använder koden till din länkbild.
Öppna din html-fil du skapade i PSP, använd det program du brukar använda
för att skapa hemsidor.
Du kanske har en annan sida där du vill använda koden och bilden.
Öppna även den filen, vi ska kopiera koden och klistra in den i din egna sida.
Kommer att kalla html-filen från PSP för fil1 och din egna fil för fil2.
1) Koderna vi ska använda är <img>-taggen och allt inom <map>och</map>
Så här blev den hos mig, och det är denna jag kopierar in i fil2 helt enkelt.
Klistra in img-taggen där du ska ha den i fil2
<img name="intf0" src="intf.gif" width="376" height="376" border="0" usemap="#intf" alt="" />
Sen klistrar du in detta någonstans nedanför img-taggen, inte inuti någon tabell, utan på ett fritt utrymme
eftersom detta är en egen tagg.
Men före </body>
<map name="intf">
<area shape="circle" coords="190,188,47" href="mailto:catarina@bondegard.se" alt="mail">
<area shape="circle" coords="58,185,47" href="http://www.bondegard.se/pussel/" alt="pusselsidan">
<area shape="circle" coords="319,183,50" href="http://www.bondegard.se/" alt="till startsidan">
<area shape="circle" coords="190,312,47" href="http://www.gestrikesparris.se" alt="">
<area shape="circle" coords="189,57,46" href="http://www.gavelhyttan.se" target="_blank" alt="Om Gavelhyttan">
</map>
