Vi skal nå lage et javascript med to funksjoner. En funksjon som skal hete "vis_skjul" tar seg av vising og skjuling av menyene, og funksjonen "bytt_knapp" bytter om på bildene som representerer knappen. Javascriptet skal stå øverst i html-dokumentet, innenfor head-taggen.

Funksjonen "vis_skjul" tar ett argument. Argumentet sier hvilken av menyene vi skal utføre endringer på. Hvis menyen er skjult skal den vises, og hvis den er synlig skal den skjules. For å finne ut om menyen er skjult eller ikke, kan vi spørre tabellradens style.display-egenskap.

document.all er en referanse til alle objekter i html-dokumentet som har navnet som skrives inni klammeparentesen. Inni klammen har jeg skrevet "under_" + valg. Hvis vi sender med "diverse" som argument når vi kaller på funksjonen (i del 3) vil javascriptet ha en referanse til alle objekter som heter "under_diverse", som er tabellraden som inneholder alle linkene. Dette ble definert i del 1.

Hvis objektet's style.display-egenskap har verdien "none" betyr det at den ikke vises;
-det som vises er ingenting.

Nå gjenstår bare koden som foretar selve visingen og skjulingen av objektene. Vi ønsker å skjule den tabellraden som kun er en blå linje i tillegg til tabellraden med linkene. For å skjule setter vi style.display = "none", og for å vise setter vi style.display = '', som egentlig er null. Vi må også skifte bildet som representerer knappen. Den skal vise pil opp når menyen vises, og pil ned når menyen er skjult.

Vi må også ha en funksjon som bytter bildene som representerer knappen. Dette fordi knappen skal endre farge når man peker på en av menyene. Dette gjør at knappen blir lettere å oppdage for brukere som ikke vet hvordan menyen er oppbygd og hvordan den virker.

Argumentet valg angir hvilken meny's knapp som skal forandres. Det andre argumentet angir om knappen skal være opplyst eller ikke.

Vi definerer at "on" i det andre argumentet skal bety at knappen skal være opplyst, og at "off" skal bety at den er i normal tilstand. Vi lager så en if-setning som skjekker dette.

Vi må nå finne ut om bildet vi skal forandre er en opp-pil eller om det er en ned-pil. Vi lager derfor if-setninger for dette også.

Som vi husker fra del 1 fikk knappen navnet "velger_diverse". Ved å sette "diverse" som første argument når vi kaller denne metoden er det knappen i diverse-menyen vi gjør endringer på.

Hvis knappen for øyeblikket er en ned-pil, skal den forandres til en ned-pil med en annen farge/tilstand og vice versa. Vi skriver koden som forandrer bildet.

Det kan se ut som denne funksjonen virker akkurat like bra selv om vi hadde kuttet ut det andre argumentet og de ytterste if-setningene. Men man ville da kunne oppleve at knappen hadde "kommet ut av rytme" av og til. Den ville da slått seg på når man ikke peket på menyen o.s.v.

Det eneste vi mangler nå er en funksjon som skal kalles når sida først vises. Denne funksjonen skal laste ned de nødvendige bildene og lagre dem i variablene som vi har brukt ovenfor. Ved å ha bildene lastet ned på forhånd kan de vises straks vi har behov for dem. Uten denne funksjonen ville skiftingen av bildene hengt lenge etter, fordi man måtte ventet på at de skulle lastes ned hver gang.

De fire første setningene lager nye image-objekter som vi kan lagre bildene i. De fire siste setningene laster ned bildene og lagrer dem i variablene. Dette virker dessverre bare på den nyeste versjonen av Internet Explorer. Men man må uansett ta denne funksjonen med, siden vi refererer til disse variablene ellers i scriptet.

->del 3