Formatering af links med typografiark

Vi har hidtil brugt HTML koden <body>, når link'ene i et dokument skulle farvelægges. Men den metode giver ikke mange muligheder.

Hvis du istedet formaterer dine links med typografiark, kan du lade fantasien få frit løb. Du kan både sætte baggrundsfarve, tekstfarve og endda forskellige typer af kanter i et snuptag. Det bedste ved det hele er at man også kan lave en "mus over" -effekt, hvilket vil sige at du kan få dit link til at ændre farve når brugeren fører sin mus hen over det.

Men lad os først se på det grundlæggende ved links i typografiark:

Det første du skal være opmærksom på er, at det ikke er helt ligegyldigt hvilken rækkefølge du benytter. Når du definerer typografien på dine links, foregår det således:


A:link    { color: red }    /* ubesøgte links  */
A:visited { color: blue }   /* besøgte links   */
A:hover   { color: yellow } /* mus over        */
A:active  { color: lime }   /* aktive links    */

Ubesøgte links
Ved hjælp af A:link defineres farven på ubesøgte links. Det vil sige links som man endnu ikke har klikket på. Denne typografi skal stå som den første.

Besøgte links
Når du vil definere en typografi for besøgte links, skal du benytte A:visited. Besøgte links er dem som brugeren har klikket på.

Mus over
"Mus over" -effekten giver mulighed for at få links til at skifte farve når musen føres hen over. Dette opnås ved at angive en typografi til A:hover.

Aktive links Angivelse af en typografi til aktive links med A:active, er især praktisk ved brug af rammer. Det giver nemlig brugeren mulighed for at se hvilket link han trykkede på for at komme til den aktuelle side.

Herunder kan du se eksempel på hvordan dine links kan formateres:

TV2

DR

TV Danmark

TV3

Prøv at klikke på dem og se hvad der sker (link'ene åbner et nyt browservindue, som du bare kan lukke for at vende tilbage hertil).

Typografiark koden til ovenstående ser således ud:


A:link    { color: red;              /* ubesøgte links  */
            border-style:solid;
            border-width:2px;
            background-color:#99CCFF;
            border-color:red;
            width:100px;
            text-decoration:none;
            text-align:center} 
   
A:visited { color: blue;             /* besøgte links   */
            border-style:solid;
            border-width:2px;
            background-color:white;
            border-color:red;
            width:100px;
            text-decoration:none;
            text-align:center}   

A:hover   { color: yellow;           /* mus over        */
            border-style:solid;
            border-width:2px;
            background-color:#99CCFF;
            border-color:blue;
            width:100px;
            text-decoration:none;
            text-align:center}

A:active  { color: lime;             /* aktive links    */
            border-style:solid;
            border-width:2px;
            background-color:white;
            border-color:red;
            width:100px;
            text-decoration:none;
            text-align:center}

Ovenstående kan umiddelbart virke voldsomt, men det er de samme 8 egenskaber der går igen for hver type link. De gennemgås kort herunder:

`color`	Denne egenskab sætter farven på teksten
`border-style`	Her fortælles hvilken type ramme/kant linket skal omgives af
`border-width`	Angivelse af kantens tykkelse i pixel
`background-color`	Linkets baggrundsfarve
`border-color`	Her bestemmes kantens farve
`width`	Antal pixel som linket skal fylde i bredden
`text-decoration`	Ved at give denne egenskab værdien `none` undgår man at linket understreges, som det ofte er tilfældet.
`text-align`	Dette er tekstens horisontale placering inden for rammen.

Men hvad så hvis man i samme HTML dokument har nogle links der skal se anderledes ud? Det problem løser du let ved at give typografierne et navn og derefter benytte HTML attributten class i dokumentet.

Herunder et simpelt typografiark med angivelse af tre forskellige typografier til link:


A:link            { color: red }
A.menu:link       { color: red;
                    border-style:solid;
                    border-width:2px;
                    background-color:#99CCFF;
                    border-color:red;
                    width:100px;
                    text-decoration:none;
                    text-align:center}
A.billede:link    { border-style:solid;
                    border-width:2px;
                    border-color:red} 
    
A:visited         { color: blue } 
A.menu:visited    { color: blue;  
                    border-style:solid;
                    border-width:2px;
                    background-color:white;
                    border-color:red;
                    width:100px;
                    text-decoration:none;
                    text-align:center} 
A.billede:visited { border-style:solid;
                    border-width:2px;
                    border-color:blue} 
  
A:hover           { color: yellow }
A.menu:hover      { color: yellow;
                    border-style:solid;
                    border-width:2px;
                    background-color:#99CCFF;
                    border-color:blue;
                    width:100px;
                    text-decoration:none;
                    text-align:center}
A.billede:hover   { border-style:solid;
                    border-width:2px;
                    border-color:yellow}
 
A:active          { color: lime }   
A.menu:active     { color: lime;
                    border-style:solid;
                    border-width:2px;
                    background-color:white;
                    border-color:red;
                    width:100px;
                    text-decoration:none;
                    text-align:center}
A:billede:active  { border-style:solid;
                    border-width:2px;
                    border-color:lime}

Man kan let miste både pusten og overblikket her. Men når man først har prøvet det, er det faktisk ikke så slemt. Du kan evt. kopiere ovenstående over i dit typografiark, og så ændre på koden så udseendet falder i din egen smag.

De fire typer link er her hver angivet tre gange. F.eks. finder du både A:link, A.menu:link og A.billede:link. Førstnævnte er lavet som sædvanlig, men de to følgende har hver fået et navn, nemlig henholdsvis "menu" og "billede".

Meningen er at typerne uden navn benyttes på de link der måtte forekomme i teksten rundt omkring i dokumentet. I menuen bruges så typografien navngivet med "menu" og de billeder der måtte forekomme som link's i dokumentet benytter typografien med navnet "billede".

Man skal så huske at benytte HTML attributten class når man laver links i menuen og links der indeholder billeder. Her et eksempel:


<A class="menu" href="dokument.html">

Menupunkt

</A>