Hjemmesidehjelpen

Knapper på hjemmesiden

Er det kjedelig å klikke på litt farget tekst for å åpne en link? Legg inn knapper i stedet! Her har du et utvalg av knappoppskrifter, fra den enkleste, grafikkfrie ­ til rimelig avansert JavaScript (og alt mulig imellom).

OBS! Alle disse oppskriftene forutsetter at du allerede vet hvordan du lager linker. Med unntak av den første oppskriften, må du også kunne å legge inn grafikk på siden. For å ha noen særlig praktisk nytte av de mer avanserte oppskriftene bør du nok også kunne et par andre ting...



Knapper med tabell-koden

Click me!
Tabellfunksjonen i HTML kan brukes til utrolig mye. Det er kanskje litt på kanten, men det går an å lage en slags "knapp" med den.

Så forferdelig pen blir den ikke, og mulighetene for å justere utseendet er begrensede. Det blir også en god bit med HTML-koding for en enkel liten knapp, men på den annen side slipper du å tenke på grafikk og slikt.

Koden for en slik knapp som den over, kan for eksempel være:

<TABLE BORDER="tykkelsen på rammen" BGCOLOR="fargen på knappen" HEIGHT="høyden på knappen" WIDTH="bredden på knappen">
<TR>
<TD>
<A HREF="adressen til målet">
<CENTER>
Teksten på knappen (evt. med diverse font- og skriftkoder)
</CENTER>
</A>
</TD>
</TR>
</TABLE>

Helt konkret, koden jeg brukte i denne knappen var:

<TABLE BORDER="1" BGCOLOR="gray" HEIGHT="20" WIDTH="70">
<TR>
<TD ALIGN="center">
<A HREF="#tabell">
<CENTER>
<B>
Click me!
</B>
</CENTER>
</A>
</TD>
</TR>
</TABLE>

Tilbake til toppen


Faste knapper
Den vanlige måten å lage en "knapp" på, er å bruke vanlig grafikk. Vi lager rett og slett et bilde av en knapp, og bruker den som link:
<A HREF="adressen til målet">
<IMG SRC="adressen til bildet">
</A>

Du kan finne massevis av ferdige knapper ("buttons") rundt om på nettet. (Se gjennom link-listen min, så finner du tips om hvor du kan lete.)

Tilbake til toppen


Kvasi-bevegelse 1

Problemet med en slik knapp, er at den ikke forandrer seg når vi trykker på den. Det vil si,vi får en ramme rundt knappen ­ en ramme som forandrer farge når vi trykker ­ men det er ikke nok. Vi kan gjøre en del ved å forandre på tykkelsen av rammen. Legg inn tilleggskoden BORDER i grafikkoden:
<A HREF="adressen til målet">
<IMG SRC="adressen til bildet" BORDER="tykkelsen på rammen">
</A>

En finjustering her kan hjelpe en god del:
BORDER="0"
BORDER="1"
BORDER="2"
BORDER="3"
BORDER="5"
Du må regne med å måtte prøve deg frem for best mulig effekt. For bred ramme kan være like dårlig som for smal. Det avhenger veldig mye av farger ­ både på bakgrunnen, på rammen og på knappen. Størrelsen på knappen har også stor betydning.

Tilbake til toppen


Kvasibevegelse 2

Noen ganger kan vi forsterke effekten ved å legge en fast ramme rundt i tillegg. Da må vi bruke tabell-koden:
<TABLE BORDER=1 CELLPADDING="0">
<TR>
<TD ALIGN="CENTER">
<CENTER>
Her legger du inn hele knappkoden fra en av rutene ovenfor
</CENTER>
</TABLE>

Tilbake til toppen


"Årntli" trykk-knapp"

Prøv den her:

Stilig, ikke sant?
Det ser så enkelt ut, og det er det også. Det som skjer, er rett og slett at bildet byttes ut med et nytt bilde når du klikker. For å få det til, må vi bruke JavaScript. JavaScript er et programmeringsspråk som kan være litt tungvint og komplisert, men her skal du få kodene av meg, så kan du bare sette dem inn.

Først må du legge det her inn i HEAD-seksjonen av dokumentet ditt:

<SCRIPT language="JavaScript">
<!-- Begin
var preload=new Image();

preload.src="adressen til det "nye" bildet";

function Skift(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>

Litt av en munnfull det her. Men dette var bare forberedelsen. Her har du koden for selve knappen:
<A HREF="adressen til målet"
onClick="Skift('navnet på bildet','adressen til det "nye" bildet')">
<IMG NAME="navnet på bildet" SRC="adressen til bildet">
</A>

Legg merke til at du må legge inn et navn (tilleggskoden NAME) på bildet. Dette er for at JavaScript skal kunne vite hvilket av bildene på siden som skal forandres. Du kan velge et hvilket som helst navn, så lenge du husker på å bruke nøyaktig det samme begge steder det står (og så lenge du ikke bruker samme navn på andre bilder på siden, selvfølgelig).
Navnene "preload", "Skift", "img_name" og "img_src" kan du forresten også velge temmelig fritt, så lenge du passer på å forandre hele veien!

Pass på at de to bildene som skal brukes, er nøyaktig like store. Ellers blir det garantert rot på siden!

En veldig viktig ting forresten:

I motsetning til HTML er JavaScript veldig nøye med ting som store og små bokstaver, linjeskift, mellomrom og alt slikt. Så skriv inn kodene nøyaktig slik de står her. Vær spesielt nøye med å skille mellom doble (") og enkle (') anførselstegn!

Tilbake til toppen


Fram og tilbake

(De tre neste oppskriftene har ingen praktisk funksjon til en "vanlig" link-knapp. Det er jo helt uinteressant om knappen går tilbake igjen eller ikke dersom siden allikevel forsvinner rett etterpå. Det er først og fremst i forbindelse med rammer og med JavaScript-knapper disse har noen hensikt.)

Et problem med knappen ovenfor, er at vi ikke "får den ut igjen". Når vi har trykket på den, holder den seg inne helt til vi laster ned siden på nytt. Kanskje denne er bedre:

Denne knappen går tilbake til utgangsposisjon så snart vi flytter musa vekk fra den.

For å få dette til, kan du legge inn en samme koden i Head-seksjonen som i forrige eksempel og forandre knappkoden til:

<A HREF="adressen til målet"
onClick="Skift('navnet på bildet','adressen til det "nye" bildet')"
onMouseOut="Skift('navnet på bildet','adressen til det opprinnelige bildet')>
<IMG NAME="navnet på bildet" SRC="adressen til bildet">
</A>

Tilbake til toppen


Alternativt...

Det finnes en annen måter å få til knapper som "går tilbake" på. I koden ovenfor kan du erstatte onClick med onMouseDown og onMouseOut med onMouseUp. Da får du teoretisk en knapp som "følger" musknappen nøyaktig, og det er jo egentlig det beste.
Problemet? Denne fungerer bare på de aller nyeste nettleserne, Netscape Navigator 4 og 5 og Internet Explorer 5. Siden det er veldig få som har oppgradert til det enda, bør vi kanskje vente litt. Prøv knappen nedenfor. Fungerer det på din maskin?

Hvis ikke, og du har moderne nok datamaskin (dvs. med Windows 95/98 eller Macintosh System 7.5 eller 8), bør du gå til Tucows og laste ned nyeste utgave av Netscape Navigator. Den har såpass mange andre fordeler også, så det er absolutt å anbefale.
Men akkurat her hjelper jo ikke det. For det er jo hva slags nettleser den som besøker siden din har, som teller i det tilfellet...

Tilbake til toppen


Knapperad

Denne her er kanskje litt vel heftig.
Image
Image
Image

Her er koden som skal inn i HEAD-seksjonen av dokumentet:

<SCRIPT language="JavaScript">
<!-- Begin
var preload1=new Image();
var preload2=new Image();
var preload3=new Image();

preload1.src="knapp1 "på"";
preload2.src="knapp2 "på"";
preload2.src="knapp3 "på"";

function Skift(img_name1,img_src1,img_name2,img_src2,img_name3,img_src3) {
document[img_name1].src=img_src1;
document[img_name2].src=img_src2;
document[img_name3].src=img_src3;
}
// End -->
</SCRIPT>

Og her er koden du legger inn der knapperaden skal være:
<A HREF="adressen til målet"
onClick="Skift('knapp1','knapp1 "på"','knapp2','knapp2 "av"','knapp3','knapp3 "av"')">
<IMG NAME="knapp1" SRC="knapp1 "av"" ALT="Image" BORDER="1">
</A>
<A HREF="adressen til målet"
onClick="Skift('knapp1','knapp1 "av"','knapp2','knapp2 "på"','knapp3','knapp3 "av"')">
<IMG NAME="knapp2" SRC="knapp2 "av"" ALT="Image" BORDER="1">
</A>
<A HREF="adressen til målet"
onClick="Skift('knapp1','knapp1 "av"','knapp2','knapp2 "av"','knapp3','knapp3 "på"')">
<IMG NAME="knapp3" SRC="knapp3 "av"" ALT="Image" BORDER="1">
</A>

Og så videre for de andre knappene.

Vil du at en av knappene skal være "på" i utgangspiunktet, bytter du om på bildeadressene i "preload"- og "SRC="-delene for den aktuelle knappen (ikke bytt noen andre steder).

Vil du ha flere (eller færre) knapper? Slik gjør du det:

Komplisert? Jada, men se på åpningssiden til "Hjemmesidehjelpen". Syns ikke du også at resultatet var verd det?

Tilbake til toppen


En utbrukt klisjé til slutt

Se på avsnittet "Fram og tilbake" en gang til. Hvis du tar koden derifra og erstatter onClick med onMouseOver, får du dette:

Denne knappen skifter med en gang du peker på den med musa. Jeg vil ikke si at effekten er ubrukelig, men særlig smakfull er den ikke. Vær dessuten klar over at den er veldig mye brukt.

Helt til slutt: Klarer du å finne ut hvordan du lager en knapp som forandres både når du peker på den og når du klikker på den?

Tilbake til toppen