Ändra egenskaper
Om vi ändar lite i funktionen så att bakgrunden i tabellen ändras och inte i hela BODY blir
färgändringen mer användbar.
Vi gör så att den ruta som menyalternativet, dvs länken, ligger i färgas till en speciell färg när musen förs över.
Det går att välja samma färg på alla menyalternativ vilket blir enhetligt och snyggt,
men för att visa hur lätt det är att styra färgen väljer vi olika färger. Målet i första steget
ser som följande bild.
Först gör vi det möjligt för funktionen som vi tidigare skapade att tala om ett speciellt element,
dvs den TD som anropet kommer från. Vi ändrar funktionen till följande:
function changeBackground(element, color){
element.style.backgroundColor=color;
}
Det vi har gjort är att ge funktionen ett attribut som talar om vilket element vi pratar om.
Det är alltså argumentet element som skickas med.
När vi nu har elementet som vi vill ändra är det bara att sätta de nya egenskaper som vi vill ha på det.
I det här fallet är det style.background som ska sättas till värdet på den färg som skickas in,
alltså color. Vi har nu skapat en funktion som vi kan säga följande till:
Förutom att ändra funktionen som utför färgningen måste vi också ändra i HTML-koden för att kunna prata med funktionen.
Det som förut såg ut enligt :
får nu följande utseende :
this, 'blue')">
<A HREF="start.html"
TARGET="innehåll">Startsidan</A></TD>
Vi har lagt till att this ska skickas med till funktionen changeBackground. this
är en speciell konstruktion i
många programmeringsspråk och betyder ungefär vad den heter, "den här".
När vi skriver this inne i själva elementkoden (som vi gjort ovan) kommer den att referera till hela elementet
som vi står i. Att skicka this till en funktion kan liknas vid:
Här är alltså "den här" som this och "byt alla bokstäver till versaler" en funktion som tar meningen som argument
och gör precis som den heter.
När vi lagt till den nya koden och gjort likadant på övriga menyrutor har vi en lite mer användbar meny. Prova gärna själv med lite olika styleattribut, det är inte bara bakgrunden som går att ändra.
För att få "länken" att byta tillbaka till sin naturliga färg när musen återigen förs utanför använder vi
händelsen onMouseOut igen. Det är bara att anropa changeBackground med den färg som vi
vill att alternativen ska ha. Färgen ska vara den ursprungliga, alltså lightgrey.
En rad ser nu ut enligt följande :
Efter att ha gjort detta med alla alternativen är vår färglada meny klar att använda på riktigt.
Ta en kopia av menyn i den pågående exemplet och gör så att alla menyvalen
("knapparna") är ljusgrå i grunden och
gröna med vit text när muspekaren är över dem. Det finns minst två sätt att göra det på.
Det första sättet bygger på att endast ändra i den kod som finns och skriva in vilka färger som ska sättas för varje enkilt element (precis som nu fast med de nya färgvalen).
Det andra sätter kräver att du skriver ny afunktioner som tar hand om jobbet. Dessa
ska ersätta changeBackground som används i exemplet. De nya funktionerna
ska ha som uppgift att "måla om" ett visst element. Vilka färger som ska sättas
behöver bara anges inne i funktionen och behöver då inte upprepas. Vill man efter
hand ändra färgvalet är det endast på detta ställe som det behöver göras. Skapa
alltså en funktion för det som ska hända med ett element då musen förs över,
och en annan funktion för det som ska hända när musen förs utanför igen.