DHTML

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!

Resultat

Kod