DiV-taggar för att skapa lagren

Placera ett antal lager på webbsidan, t ex så här:

<DIV ID="0"
STYLE="position:absolute;z-index:0;top:10px;left:10px;">
TEXT och BiLDER
</DIV>

<DIV ID="1"
STYLE="position:absolute;z-index:1;top:20px;left:20px;">
TEXT och BiLDER
</DIV>

Ge varje lager ett unikt namn efter DIV ID.

z-index i stilmallen

Siffran efter z-index reglerar var i en stapel ett lager befinner sig, dvs ett lager med z-index:0 ligger under ett lager med z-index:1 som i sin tur ligger under ett lager med z-index:2. Högst siffra hamnar överst/längst fram.
I exemplet ovan är det egentligen onödigt att ta med z-index eftersom lagren automatiskt hamnar rätt: den sista DIV-taggens lager hamnar över den första DIV-taggens lager. Flyttar man lager efter att sidan laddats måste man däremot sätta om z-index för att få rätt yta att hamna i bakgrunden.

STAPLA OM: zIndex i JavaScript-koden

Om man har ett lager som heter lager2 och vill lägga det underst kan man använda kod som ser ut så här:

document.getElementById('lager2').style.zIndex=0;

Om man samtidigt har ett lager som heter lager1 och vill lägga det överst kan man använda kod som ser ut så här:

document.getElementById('lager1').style.zIndex=1;

Koden för en länk som placerar lager2 underst i en stapel skulle alltså kunna se ut så här:

<A HREF = "javascript:void(0)"
ONCLICK="document.getElementById('lager2').style.zIndex=0;">lägg lager2 underst</A>

Flytta lager uppåt/nedåt top eller åt sidan left

Om man vill flytta lager1 till en bestämd plats på sidan - till exempel placera det högst upp i vänstra hörnet där både x och y är 0 - kan man använda kod som ser ut så här:

document.getElementById('lager1').style.top=0px;
document.getElementById('lager1').style.left=0px;

JavaScript-koden till exemplet högst upp på sidan

Koden förutsätter att

de lager som ingår i stapeln får namn: 0,1,2,3 etc
Varje lager förses med en länk som ser ut ungefär så här:

<A HREF = "javascript:void(0)"
ONCLiCK="iljmove(x)">lägg underst</A>

och där x byts ut mot det aktuella lagrets siffernamn
funktionen starting_up() anropas: <BODY ONLOAD="starting_up()">
ändringar görs på de 4 raderna med texten // ÄNDRA
- x0 och y0 bestämmer var det understa lagrets övre vänstra hörn hamnar

All kod placeras mellan SCRIPT-taggar i HEAD-delen.

function starting_up()//
{
if(document.getElementById)//
{
sista_lagrets_namn=3 // ÄNDRA
skillnad=20; // ÄNDRA
x0=10 // ÄNDRA
y0=10 // ÄNDRA

active=sista_lagrets_namn;//
}
}

function iljmove(klickad)//
{
if(document.getElementById)//
{
if(active==klickad)//
{
active--;//
if(active<0){active=sista_lagrets_namn;}//
document.getElementById(klickad).style.zIndex=0//
for(i=0;i<active+1;i++)//
{
if(i!=klickad)//
{
document.getElementById(i).style.zIndex=
document.getElementById(i).style.zIndex+1//
}
}
document.getElementById(klickad).style.top=y0+"px"//
document.getElementById(klickad).style.left=x0+"px"//
for(i=0;i<active+1;i++)//
{
if(i!=klickad)//
{
document.getElementById(i).style.top=
parseInt(document.getElementById(i).style.top)+skillnad+"px"//
document.getElementById(i).style.left=
parseInt(document.getElementById(i).style.left)+skillnad+"px"//
}
}
}
}
}

Sidan gjordes av

ilj@flowsim.se

Senast ändrad 23 maj 1998

www.flowsim.se