DHTML

Visa aktivt val

För att på ytterligare ett sätt visa för användaren att något har hänt i menyn utökar vi funktionaliteten med att visa vilket alternativ som är valt i huvudmenyn och som visas i ramen innehåll. Vi ska lägga en svart ram runt den länk som är aktiv. Detta ska hända när användaren klickar på länken. Samtidigt som den aktiva länken visas med ram ska den länk som tidigare var aktiv visas i normalt läge.

Till att börja med skapar vi en funktion som tar hand om det mesta arbetet åt oss. Som argument till funktionen ska vi skicka med det element (alltså tabellcellen runt länken) som användaren klickat på. Funktionen får heta activeLink

function activeLink(element){

  document.getElementById('start').style.border = 0;

  document.getElementById('leksaker').style.border = 0;

  document.getElementById('bilder').style.border= 0;

  document.getElementById('google').style.border = 0;

  element.style.border = "black solid 4px";

}

Funktionen nollställer först alla länkar så att inget element har ram runt sig. Efter detta lägger vi på en ram med koden

där element alltså är det element som vi skickat med som argument.

Anropet till activeLink kommer från det event som skapas när användaren klickar på en av länkarna. Vi väljer att lägga koden för detta event direkt i tabellcellen enligt :

<TD id="start" onMouseOver="changeBackground(this, 'green')" 

	onMouseOut="changeBackground(this, 'lightgrey')" 

	onClick="activeLink(this)">

	<A HREF="start.html" TARGET="innehåll">Startsidan</A>

</TD> 

Efter detta blir resultatet följande