DHTML

Ä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.

Slutmål

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:

Här har du ett element som jag vill att du färgar blått!

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 :

<TD onmouseover="changeBackground('blue')"><A HREF="start.html" TARGET="innehåll">Startsidan</A></TD>

får nu följande utseende :

<TD onmouseover="changeBackground(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:

Ta "den här" meningen och byt alla bokstäver till versaler.

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.

Resultat

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 :

<TD onMouseOver="changeBackground(this, 'blue')" onMouseOut="changeBackground(this, 'lightgrey')"> <A HREF="start.html" TARGET="innehåll">Startsidan</A> </TD>

Efter att ha gjort detta med alla alternativen är vår färglada meny klar att använda på riktigt.

Resultat

Kod

Övning 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.

Lösningsförslag metod 1 och metod 2 och vi får följande

Resultat

Du kan välja att använda den nya koden för menyn i de fortsatta exemplen eller använda koden som den såg ut innan. De exempel som följer kommer att använda det nya och lite renare utseendet på menyn.