Egna funktioner
Vi har nu gjort små saker som man lätt kan skriva inuti ett element. Om man vill göra lite mer avancerade saker med JavaScript kan man skriva egna funktioner som anropas från elementen. Alla funktioner måste skrivas i HEAD och det kan se ut såhär:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeBackground(color){
document.body.style.backgroundColor=color;
}
</SCRIPT>
</HEAD>
Vi lägger in den här koden i filen meny.html. Kopiera det som står inom <HEAD> och </HEAD> och lägg
det någonstans i HEAD i meny.html. Funktionen tar ett argument som är den färg som kroppen ska sättas till.
Det här görs genom att via DOMs document ta fram BODY och sätta dess style.backgroundColor till den färg som skickas med.
Sen är det bara att anropa funktionen när olika saker händer i webbläsaren. Här är ett exempel på hur vi kan leka med
menyn:
<TD onmouseover="changeBackground('blue')">
<A HREF="start.html" TARGET="innehåll">Startsidan</A>
</TD>
<TD onmouseover="changeBackground('maroon')">
<A HREF="leksaker.html" TARGET="innehåll">Nikes leksaker</A>
</TD>
<TD onmouseover="changeBackground('white')">
<A HREF="bilder.html" TARGET="innehåll">Foton</A>
</TD>
<TD onmouseover="changeBackground('yellow')">
<A HREF="http://www.google.com"
TARGET="innehåll">Sök med Google</A>
</TD>
För att få ett OK resultat ska vi även göra en liten förändring i stilmallen. Tidigare
satte vi att tabellen som utgör menyn (och även alla andra tabeller) skulle täcka
80% av sidans bredd. För att effekten ska bli lite snyggare när vi inför de färgändringar
som vi håller på med vill vi hellre att menyn ska ta den plats den kräver. Alltså tas
width : 80% bort från tabell-regeln i stilmallen. Detta påverkar förutom stilmallen också
tabellen med Nikes leksaker.
Det är när muspekaren förs över en länk i menyn som funktionen changeBackground anropas.
Titta hur det ser ut!
