Övningar i dhtml
(dropdown-menyer med lager i Netscape)

Växla mellan två lager

Skapa två lager. Låt det första heta RUBRIK1 och ge det följande mått: koordinater för övre vänstra hörnet = 10,10; bredd=100; höjd=25, bgcolor=#dddddd. Det andra kallar du MENY1 och ger det höjden 50, men i övrigt samma mått. Skriv ordet meny i RUBRIK1-lagret. I MENY1-lagret skriver du också Meny följt av en radbrytning och därefter ordet Val. Låt RUBRIK1 vara synligt och MENY1 dolt. Skriv sedan händelsehanterare vilka låter lagren skifta så att MENY1 syns vid MOUSEOVER och döljs vid MOUSEOUT. För RUBRIK1 skall det motsatta gälla.

Skapa kantlinje med hjälp av extra lager.

Utgå från den förra övningen och försök skapa en kantlinje genom att placera lager bakom de bägge lagren. Ge de bakomliggande lagren avvikande färger. Låt de bakomliggande lagren sticka ut en pixel åt alla håll. Detta åstadkommer du genom att göra bredd och höjd två pixel större vardera. Därefter justerar du lagrets placering ett steg åt vänster och ett steg uppåt. Låt koden för de extra lagren vara nästade inom var sitt av de ursprungliga lagren och sätt deras synlighet (VISIBILITY) till INHERIT. På så sätt kommer de att ärva de förändringar i synlighet som deras omgivande lager undergår.

Padding i lager

I Netscape kan du specificera style sheets med hjälp av Javascript. Följande kod skapar en klass som sätter värden på ett elements vänster- och topmarginaler.

	<STYLE TYPE="text/javascript">
	with (classes.ruta.all) {
		marginLeft = "7pt";
		marginTop = "2pt";
	}
	</STYLE>

Använd liknande kod och försök placera texten i exemplet ovan på ett snyggt sätt.