 |
   |
 |
|
Exemplet ovan fungerar 1-15 varje månad. Den första i varje
månad kan man "öppna en lucka", den andra kan man öppna två
etc. Vad som händer är helt enkelt att när man klickar på en ruta och det är rätt dag visas en ny bild på den platsen. I exemplet används totalt 16 bildfiler; de 15 bilder som finns "bakom luckorna" är i det här exemplet bitar av en och samma bild. 
<A HREF="#" ONCLICK="iljshow(0,0);return false"><IMG SRC="bildfil" WIDTH="bildens bredd i pixel" HEIGHT="bildens höjd i pixel" BORDER="0"></A> Taggen för den andra bilden ser ut så här: <A HREF="#" ONCLICK="iljshow(1,1);return false"><IMG SRC="bildfil" WIDTH="bildens bredd i pixel" HEIGHT="bildens höjd i pixel" BORDER="0"></A> För en kalender med 15 "luckor" behöver man alltså 15 sådana här IMG-taggar. Ersätt bildfil med namnet på de bilder som ska visas på de olika bildplatserna och fyll i bildernas bredd och höjd. Den rad som ser ut så här iljshow(0,0);return false måste också ändras. Den första siffran inom parentes syftar på bildplatsen (IMG-taggen), den andra på vilken bild som ska visas (mer om det längre ner). För varje IMG-tagg man placerar på sidan måste den första av de här siffrorna räknas upp med ett. Den andra siffran ska ändras så att den pekar på rätt bild (mer om det längre ner). I den andra IMG-taggen kan raden alltså se ut så här iljshow(1,1);return false och i den följande så här iljshow(2,2);return false (2,2) betyder här helt enkelt att på bildplats nummer 2 ska bild nummer 2 visas. (3,2) betyder att på bildplats 3 ska bild nummer 2 visas. Den allra första IMG-tagg som placeras på en sida är automatiskt bildplats nummer 0.
if(document.images) { iljbild=new Array() iljbild[0]=new Image() iljbild[0].src="bildfil1" iljbild[1]=new Image() iljbild[1].src="bildfil2" iljbild[2]=new Image() iljbild[2].src="bildfil3" // etc } Fortsätt listan med alla bilder som behövs. Siffran inom hakparentesen ska stämma överens med andra siffran inom parentes i anropet. Dvs, om den blå raden i en IMG-tagg ser ut så här iljshow(2,1);return false så är det den bildfil som angetts efter bild[1].src som kommer att visas på bildplats nummer 2 (sidans tredje bildtagg).
datum=new Date() maanad=datum.getMonth() maanad++ dag=datum.getDate()
function iljshow(iljbildplats,iljbildnr) { if(document.images) //om bildväxling fungerar { if(maanad==4&&dag<10) //om det är 1-9 april { if(dag>=1&&iljbildplats==0) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=2&&iljbildplats==1) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=3&&iljbildplats==2) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=4&&iljbildplats==3) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=5&&iljbildplats==4) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=6&&iljbildplats==5) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=7&&iljbildplats==6) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=8&&iljbildplats==7) {document.images[iljbildplats].src=iljbild[iljbildnr].src} if(dag>=9&&iljbildplats==8) {document.images[iljbildplats].src=iljbild[iljbildnr].src} // etc } } } Som koden här ovanför är skriven fungerar kalendern (som i det här fallet har nio "luckor") bara under de första 9 dagarna i april if(maanad==4 && dag<10) "om månaden är lika med april och dagens nummer är mindre än 10" Om man vill ha en kalender som består av 15 luckor som ska kunna öppnas mellan den 1 och 15 juni kan man skriva så här i stället if(maanad==6 && dag<16) Därefter följer ett antal if-satser som ser till så att en lucka inte kan öppnas före en bestämd dag. Ex if(dag>=1 && iljbildplats==0) {document.images[iljbildplats].src=iljbild[iljbildnr].src} De två raderna här ovanför kan läsas "om det är den 1 april eller senare - dag>=1 - och bild(platsen) som man klickat på är den första bilden i kalendern - iljbildplats==0 - så visas en ny bild på just den bildplatsen". Raden som utför själva bildväxlingen ser ut så här document.images[iljbildplats].src=iljbild[iljbildnr].src iljbildplats och iljbildnr bestäms av de siffror man skickat med som argument (angett inom parentesen) i anropet. Det fungerar så här: 
Om, till exempel, den första bilden i kalendern är den första IMG-taggen på sidan och man vill att luckorna ska kunna öppnas i nummerordning och fr o m den 1 April kan man skriva så här: function iljshow(iljbildplats,iljbildnr) { if(document.images) { if(maanad==4&&dag<10) { if(dag>=iljbildplats+1) {document.images[iljbildplats].src=iljbild[iljbildnr].src} } } }  Sidan gjordes av  ilj@flowsim.se Senast ändrad 22 mars 2000. Den här sidan hör hemma hos www.flowsim.se |