Länkar och klickbara bilder

Utan länkar inget Internet - så är det! Länka till andra sidor, använd bilder som länkar och förflytta dig med hjälp av länkar till andra delar av den aktiva sidan.

Inledning

Det som i grund och botten gör webben så revolutionerande, förutom att all världens information görs tillgänglig, är möjligheten att länka nyckelord och webbsidor till andra sidor. Utan länkar vore webben bara en elektronisk bok med undermålig utformning.

Om man läser en bok och stöter på ett begrepp man vill veta mer om kan man i bästa fall hitta ordet i en ordförklaring. I värsta fall tvingas man leta upp information i andra böcker, eller helt enkelt strunta i förklaringen. Om den som gjort webbsidan du läser är omtänksam har han, eller hon, gjort begreppet till en länk. Då kan du som användare klicka på ordet och öppna en ny sida med mer information. På så vis kan man som webbproducent skriva en text avsedd för insatta, med lämplig bakgrundsinformation och extra text för den som vill veta mer, eller fördjupa sig i ämnet. Detta är en stor fördel jämfört med den tryckta boken eftersom du själv bestämmer om du vill läsa den extra informationen.

Länkar kan bestå av text, bilder eller en kombination av båda. Längre fram i kursen ska vi kika lite på Dynamisk HTML, där det är möjligt att göra hela sidor till klickbara länkar, men för tillfället nöjer vi oss med text och bilder. Men nog med snack, nu sätter vi igång med det roliga.

Absoluta och relativa länkar

Precis som när man anropar bilder kan man använda relativa eller absoluta länkanrop. En länk kan vara så enkel som namnet på den sida man vill länka till:

extra_information.html

Om ovanstående länk sitter på sidan information.html, i katalogen julgranar, letar webbläsaren i samma katalog. Nedan följer ett exempel på en relativ länk som anropar en sida i en katalog högre upp i katalogstrukturen:

../tomtar.html

De två punkterna och snedstrecket (../) betyder att webbläsaren ska leta efter filnamnet en nivå högre upp i katalogstrukturen. Om du vill gå upp två nivåer anger du ../../ och så vidare.

På motsvarande sätt kan man anropa en fil som ligger längre ner i katalogstrukturen, det vill säga en fil som ligger i en annan katalog än filen där länken finns. Då anger du katalognamnet följt av ett snedstreck (/):

mer_info/mer_information.html

I ovanstående anrop finns filen mer_information.html sparad i katalogen mer_info (hoppas jag eftersom det inte fungerar annars!).

En absolut länk anger hela sökvägen till sidan, vilket innebär protokoll, värddator och eventuella katalognamn innan sidan anges:

http://www.algonet.se/~bjorn_m/index.html

Se Bild 3.1 för en bild av hur katalogstruktur och länkanrop hör ihop.

I senare lektioner ska vi diskutera hur man organiserar sina sidor och hur man bör utforma sina länkar. För tillfället går vi igenom mekaniken bakom länkar.

Länkar

<A>

Ett aktivt område definieras med märket <A>. Märket, som betyder anchor (ankare), omger text eller en bild och talar om för webbläsaren att det som omges av inledande och avslutande märke ska behandlas på ett särskilt sätt. Om man anger attributet HREF med tillhörande adress kommer den markerade texten att visas som blå och understruken. Om man använder en bild som länk omges den av en blå ram (såvida du inte anger BORDER=0 i märket <IMG>, se avsnittet om Bildlänkar).

När man för muspekaren över text- eller bild länkar ändras pilen till en hand. Dessutom visas URL-adressen dit länken går längs ner i statusfältet. Märket påverkar inte sidan i övrigt. Du kan fortfarande ange inställningar för till exempel teckensnitt och teckensnittsstorlek.

HREF

När man definierat en länk (text eller bild) måste man ange vart länken ska peka. Det gör du med attributet HREF. Genom att omge ett ord eller en mening (det finns ingen egentlig gräns så länge man håller sig på samma sida) med <A HREF> gör man ordet till en länk.

Så här kan det se ut:

1997 vann <A HREF="farjestad.html">Färjestad
</A> Elitserien, men i år ligger de sämre till.

Här märker vi ut texten Färjestad med inledande och avslutande <A>. Attributet HREF sätts att referera till URL-adressen farjestad.html som är den sida som ska öppnas om en besökare klickar på länken. Texten som visas mellan <A>-märkena har ingen betydelse för länken. Vi hade kunnat skriva Leksand istället, och ändå hamnat på Färjestad-sidan. I det här fallet vore det i och för sig att lura besökaren, som hoppas få upp en sida om Leksands eminenta hockeylag.

Var noga med att avsluta länktexten med </A>, annars fungerar inte länken.

NAME

I vissa fall vill man kunna referera till ett specifikt ankarmärke, se avsnittet # ankarreferens nedan. Det gör man genom att infoga attributet NAME i märket Den markerade texten blir inte blå, eftersom det inte är en länk. Däremot kan man från andra sidor länka till detta märke. Satsen

<A NAME="avsnitt01">Stycke 1</A>

definierar ett ankare som heter avsnitt01. Det finns inget som hindrar att man även sätter in HREF för att göra märket till en länk, men det påverkar inte möjligheten att referera till det aktuella ankaret.

# (ankarreferens)

Med HREF kan man som du redan sett länka till sidor. Men man kan även ange vilken del sidan som ska visas. Det gör man med hjälp av tecknet # och ett s.k. ankarnamn. Satsen

Recept på <A HREF="recept.html#nachos">Nacho Sombreros</A>.

kommer att öppna sidan recept.html och därefter söka upp ett ankarmärke vars NAME-attribut har värdet nachos. I filen som öppnas måste det finnas en text som markerats med

<A NAME="nachos">Nacho Sombreros</A>

annars öppnas filen som vanligt. Om märket hittas kommer sidan recept.html att öppnas med rubriken Nacho Sombreros längst upp i webbläsarens fönster.

Om ankaret ligger sist på sidan, eller så långt ner att det inte finns tillräckligt av sidan kvar nedanför för att fylla upp fönstret kan det hända att rubriken inte visas allra högst upp, men det kommer a vilket fall att visas på bildskärmen.

Man kan även använda referenser till ankarnamn inom en och samma sida. Då behöver man inte ange vilken fil som namnet finns i, man skriver bara tecknet # och ankarnamnet som värde på attributet HREF, så här:

<A HREF="#topp">Tillbaka till sidans början</A>

Om sidans första stycke, eller rubrik, namngivits som topp tar den här länken besökaren tillbaka till sidans början. Du kan använda den här metoden för att göra en innehållsförteckning överst på sidan, eller för skapa länkar till vissa viktiga stycken.

TARGET

Om man anger länken enligt ovan ersätts den aktuella sidan med den länkade sidan i webbläsaren. Genom att använda attributet TARGET kan man öppna den länkade sidan i en egen webbläsare.

Förra året vann <A HREF="farjestad.html" TARGET="new">
Färjestad</A>Elitserien, men i år ligger de sämre till. 
Senast fick de bara oavgjort mot <A HREF="leksand.html" 
TARGET= "_top"> Leksand </A>.

Textlänkar

Inledningsvis har vi använt textlänkar för att illustrera hur länkar fungerar. Vi hade lika gärna kunnat använda bildlänkar eftersom båda fungerar likadant. Det finns dock ett par inställningar som gäller specifikt för textlänkar.

Färg på länkar

Standardfärgen för en icke besökt länk är blå, en besökt länk är lila och en aktiv länk (då man klickar på den) är röd. Orsaken till att just dessa färger valdes känner jag inte till, men de har kommit att bli standard för grafiska webbläsare. Du bör ha ett mycket bra skäl till att ändra dessa färger för länkar på dina webbsidor.

Färgen på länkar definieras i märket <BODY>. Det finns tre attribut:

• LINK för ej besökta länkar
• VLINK för besökta länkar
• ALINK för den aktiva länken (en länk är aktiv så länge du har klickat
  på länken men inte släppt upp musknappen).

Låt oss säga att vi vill att ej besökta länkar ska vara gröna, besökta länkar ska vara orangea och den aktiva länken ska vara lila. Så här kan koden då se ut (se även Bild 3.4):

<BODY LINK="#00FF00" VLINK="FF9900"ALINK="FF00FF">

Stil på länkar

Textlänkar är vanligtvis understrukna. (Därav följer att du inte bör stryka under vanlig text eftersom besökare då luras att tro att det är en länk.) I avsnittet om hierarkiska stilmallar (CSS) ska vi kika på fler inställningar för textlänkar.

Bildlänkar

Bildlänkar fungerar exakt som textlänkar. Bilden som anges mellan de två <A>-märkena blir ett aktivt område som användaren kan klicka på. Hela bilden blir en länk. Om inget kantlinje (BORDER) anges kommer bilden att omges av en blå ram, se Bild 3.2 på sidan 5. Så här anger du att en bild ska vara länk:

<A HREF="annan_sida.html"><IMG SRC="bild.gif"
    BORDER="0"></A>

Den här bilden fungerar som länk till sidan annan_sida.html och den har ingen blå kantlinje eftersom vi satt BORDER="0". Om du känner för det kan du även ange text som en del av ovanstående länk. Då visas en bild och sedan texten som blå och understruken. Det blir kanske inte så vackert, eller ens funktionellt, men det skulle fungera.

MailTo:

En speciell form av länk är MailTo. Sätt in en sådan om du vill att de som besöker dina webbsidor ska kunna skicka e-post till dig. Formatet påminner om en vanlig länk:

Om du vill kontakta mig så kan du skicka ett 
    <A HREF="MAILTO:bjorn_m@algonet.se">e-brev</A>

och texten e-brev ser ut som en vanlig textlänk.

I exemplet ovan har MailTo:-länken försetts med ett extra argument, ?subject=Hejsan. Subject används för att ange vad som ska stå i brevets ärende-rad (subject line).

Klickbara bilder

Tidigare i den här lektionen har vi använt bilder som länkar. Men man kan åstadkomma mer med bilder - nämligen klickbara bilder eller image maps. Via en klickbar bild kan man, till skillnad från en bildlänk, komma till olika URL-adresser beroende på var i bilden man klickar. Hur bilden ser ut har ingen betydelse, det är de angivna koordinaterna som avgör vilka delar av bilden som ska definieras som länkar.

Det finns olika typer av klickbara bilder, sådana som definieras med hjälp av den aktuella webbservern och sådana som definieras i den aktuella webbsidan. Skillnaden ligger främst i hur information skickas till besökarens webbläsare. Jag kommer att gå igenom den senare metoden eftersom de allra flesta webbläsare numer kan hantera denna typ av klickbara bilder.

Nu börjar vi

OK, klickbara bilder var det. Här följer ett exempel på en webbsida som utnyttjar en sådan som en slags innehållsförteckning.

Olika områden av bilden är definierade via ett bildschema (image map) enligt illustrationen nedan.

När pekaren förs över de olika områdena blir pekaren en hand, och längst ner på statusraden visas vilken URL som är kopplad till det aktuella området. Om det finns delar av bilden som inte är kopplade till en länk så förblir pekaren en pil.

USEMAP

Bilden är en vanlig bild som länkas till sidan med märket <IMG>, det nya är attributet USEMAP. USEMAP används för att, via ett namn, referera till en uppsättning koordinater som definierar de olika områdena på bilden. Satsen

<IMG SRC="meny.gif" USEMAP="#koordinater">

använder koordinater som definierats med namnet koordinater. Koordinaterna för bildens områden definieras med märkena <MAP> och <AREA>. Ett bildschema med två fyrkantiga områden kan se ut så här:

<MAP NAME="koordinater">
<AREA SHAPE="rect" COORDS="40,10,130,130" 
    HREF="bilder.html>
<AREA SHAPE="rect" COORDS="120,30,200,180" 
    HREF="spel.html>
</MAP>

<MAP>

Märket <MAP> innehåller bara attributet NAME, som definierar namnet på bildschemat. Du kan ange vilket namn du vill, så försök göra namnet så beskrivande som möjligt.

<AREA>

<AREA> innehåller fyra attribut: SHAPE, COORDS, ALT och HREF. Vi går igenom attributen nedan.

COORDS

Som redan beskrivits ovan anger man olika typer av former i attributet SHAPE. De olika koordinaterna anges i attributet COORDS. De angivna koordinaterna måste stämma med den typ av yta som SHAPE påbjuder. Om du anger att du vill skapa en fyrkant, kan du inte ange centrumpunkt och radie som för en cirkel.

SHAPE

SHAPE anger vilket utseende det definierade området ska ha. Välj mellan rect, circle, poly och default.

SHAPE="rect"

Med rect definerar du en fyrkantig yta vars övre vänstra och nedre högra hörn du anger i form av fyra numeriska värden. De fyra värdena är i tur och ordning, övre vänstra hörnets x-värde, övre vänstra hörnets y-värde, nedre högra hörnets x-värde och nedre högra hörnets y-värde. (Se Bild 3.8)

Koordinatsystemet utgår från bilden som anropas via märket <IMG>. Bildens övre vänstra hörn har koordinaten (0,0). Det nedre högra hörnet har ett koordinat som är identiskt med bildens bredd och höjd. Om bilden är 250 bildpunkter bred och 140 bildpunkter hög får det nedre högra hörnet koordinaten (250,140). En aktiv yta får givetvis inte sträcka sig utanför bildens koordinater.

SHAPE="circle"

Precis som namnet antyder kan man med detta attribut definiera en cirkulär yta. Ange tre värden, x- och y-värde för cirkelns mittpunkt samt cirkelns radie (d.v.s. avståndet från centrumpunkten ut till cirkelns linje. Satsen

<MAP NAME="meny">
<AREA SHAPE="circle" COORDS="210,110,165" 
    HREF="bjorn.html>
</MAP>

definierar en cirkel vars centrum ligger 210 bildpunkter till höger om det övre vänstra hörnet, 110 bildpunkter nedåt från bildens övre kant räknat och som har en radie på 82 bildpunkter (vilket ger en diameter på 164 bildpunkter. Definitionen används i Bild 3.9.

SHAPE="poly"

Den mest avancerade ytan är månghörningen (polygon). Du definierar själv hörnpunkter för den klickbara ytan. Månghörningen kan bestå av upp till 100 xy-koordinater, som anges i samma ordning som för rect. Satsen

<MAP NAME="meny">
<AREA SHAPE="poly" COORDS="105,35, 173,97, 155,107, 
    131,75 98,108, 72,102 58,109 26,103" 
    HREF="pyramid.html>
</MAP>

definierar en månghörning som börjar med koordinaten (105,35), och som sedan fortsätter via (173,97), (155,107), (131,75), (98,108), (72,102), (58,109) till (26,103) för att slutligen knytas ihop med den första koordinaten. Du behöver inte ange ett slutkoordinat eftersom samma koordinat som först angavs, (105,35), också fungerar som avslutande koordinat. eftersom månghörningen måste slutas till en sammanhängande yta.

SHAPE="default"

Ytor på en bild som inte är aktiva genom någon annan SHAPE/COORDS-definition täcks in av alternativet default. Om man klickar utanför alla aktiva områden kommer default-alternativet att aktiveras. Då kan man till exempel visa en sida som förklarar hur den klickbara bilden ska användas.

Om flera aktiva ytor överlappar varandra, d.v.s. anger samma yta som aktiv så tar den första definitionen överhand. Den ligger överst i hierarkin av aktiva ytor.

ALT

Det här attributet har vi använt tidigare. Text som du anger som värde till ALT visas när du för pekaren över den definierade ytan.

HREF

HREF innehåller adressen till den sida som ska visas när användaren klickar inom den specificerade ytan. Anropet fungerar precis som vanliga länkar.

NOHREF

Om man vill kan man skapa en länk som inte leder någonstans (varför man nu skulle vilja det).

Exempel

Här följer ett exempel på en sida som använder länkar och klickbara bilder. Resultatet ser du i Bild 3.11:

Exempel 3-1: Bildschema

<HTML>
<HEAD>
<TITLE>BeM Skrivbyrå - Startsida</TITLE>
</HEAD>
<BODY BACKGROUND="bakgrund.gif">
<!--; schema för menyn till BeM Skrivbyrå --;>
<MAP NAME="meny">
<AREA SHAPE="rect" COORDS="31,248,144,315" 
    HREF="dtp.html" ALT="DTP">
<AREA SHAPE="rect" COORDS="200,84,278,196" 
    HREF="bilder.html" ALT="Bilder">
<AREA SHAPE="circle" COORDS="239,277,52" 
    HREF="about.html" ALT="Om BeM Skrivbyrå">
<AREA SHAPE="poly" COORDS="134,118,147,130, 134,210,89,
    220,48,219,27,201,39,171,89,129" HREF="serier.html" 
    ALT="Serier">
<AREA SHAPE="default" HREF="forklaring.html">
</MAP>
<!--; här börjar sidans innehåll--;>
<CENTER>
<IMG SRC="vaelkommen.gif"><BR>
<IMG SRC="space.gif" WIDTH="1" HEIGHT="20"><BR>
<IMG SRC="bem_skriv.jpg" USEMAP="#meny" BORDER="0"><BR>
<IMG SRC="space.gif" WIDTH="1" HEIGHT="20"><BR>
<HR WIDTH="50%">
[ <A HREF="bilder.html">Bilder</A>
    <A HREF="spel.html">Spel</A>
    <A HREF="dtp.html">DTP</A>
    <A HREF="about.html">Om BeM Skrivbyrå</A> ]
</CENTER>
</BODY>
</HTML>

Sidan består av en bakgrund, Den klickbara bilden innehåller fyra aktiva områden, som var och en tar användaren till en ny sida. Det finns även en default-sida dit användaren kommer om han klickar utanför bildens aktiva områden.

Sammanfattning

I det här kapitlet har vi diskuterat länkar, i form av text, bilder och klickbara bilder. Att skapa en länk är ganska enkelt, men det är en mycket användbar teknik.

Märken

Frågor

1. Vilket märke definierar ett aktivt område?
2. Hur anger du att en HREF-länk ska öppna den refererade sidan i ett nytt fönster?
3. Hur anger du att sidan film_tv.html ska öppnas och visa ett textstycke som definierats med namnet Brassed_off?
4. Hur ändrar du färgen på en ej besökt textlänk?
5. Hur skapar du en bildlänk som leder till sidan klanen.html och som använder bilden klanbild.gif?
6. Hur definierar man en rund aktiv yta som är 150 bildpunkter i diameter, 200 punkter från övre kanten och 320 punkter från högra kanten av den aktuella bilden?
7. Ange att en bild ska använda <MAP>-definitionen bild.

Svaren på frågorna finns i Bilaga A.

Senast uppdaterad 99-08-09