Placera ut den bild som ska vara dold av luckor med en DIV-tagg och bestäm bredd och höjd samt bildens placering (
left och
top). Till exempel:
<DIV STYLE="position:absolute;
left:120px;top:120px;
width:300px;height:300px;background-color:red">
DET DOLDA</DIV>
I exemplet finns det för övrigt ingenting annat än en röd yta under fyrkanterna.
Placera ut "luckor" ovanpå det första lagret. Här följer en DIV-tagg som placerar en svart, 50 pixlar bred och 50 pixlar hög fyrkant uppe i övre vänstra hörnet av den yta som ska vara gömd:
<DIV STYLE="position:absolute;
left:120px;top:120px;
width:50px;height:50px;
background-color:black;>
</DIV>
Placera ut fler ytor/DIV-taggar tills bilden är helt täckt.
De fyrkanter som ska fungera som öppningsbara luckor förses sedan med kod som ser ut så här:
ONCLICK="this.style.visibility='hidden'
"
Raden här ovanför betyder helt enkelt: när någon klickar (ONCLICK) på just den ytan (this) så blir den ytan osynlig och alltså blir den yta som ligger under den bortklickade ytan synlig.
Fast, nu ska man ju inte kunna klicka bort "luckorna" hur som helst, utan bara på rätt dag. För att ta reda på vilket datum det är krävs ett javascript som ser ut så här:
<SCRIPT TYPE="text/javascript">
<!--
datum= new Date()
datum=datum.getDate()
//-->
</SCRIPT>
Placera skriptet någonstans mellan HEAD-taggarna. Dagens datum finns nu i
datum. Ändra koden för de "öppningsbara luckorna" till:
ONCLICK="if(datum==XX){this.style.visibility='hidden'}"
där
XX byts ut mot det datum då just den luckan får öppnas, t ex
ONCLICK="if(datum==13){this.style.visibility='hidden'}"
Hela DIV-taggen till en svart yta som kan klickas bort den 13:e ser alltså ut så här:
<DIV ONCLICK="if(datum==13){this.style.visibility='hidden'}"
STYLE="position:absolute;
left:280px;top:310px;
width:100px;height:100px;
">13
</DIV>
Om en yta ska kunna klickas bort fr o m den 13:e byter man ut
== mot
>=.
Mer om stilmallar finns under STYLESHEETS/ STiLMALLAR på www.flowsim.se
Mer om jvascript finns under JAVASCRiPT på www.flowsim.se
Den DIV-tagg som skrivs in först hamnar underst. Man kan också reglera placeringen i djupled med hjälp av
z-index. Ett lager med
z-index:0 hamnar under ett lager med
z-index:3 osv.
STORLEK
width:200px // bredd 200 pixlar
height:300px // höjd 300 pixlar
PLACERiNG
left:160px // 160 pixlar från vänsterkanten
top:110px // 110 pixlar från överkanten
BAKGROUNDSFÄRG
background-color:#000000 // bakgrundsfärg svart
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 30 april 2004.
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
ilj@flowsim.se