Så här gör du din egen kalender i PaintShopPro 7.0 och senare versioner

 
Se ex. på hur den kan se ut

--> HÄR

 Det fiffiga med den här kalendern är att luckorna INTE, med hjälp av mitt javascript, går att öppna i förväg.
 
Vad du behöver är ett fotografi eller en bild som du vill använda som kalenderbakgrund. Koden till att "öppna" luckorna med kommer längre ner på sidan. Först ska vi bearbeta bilden.

Här har jag använt en bild av en av familjens kelgrisar. För att lätt kunna dela in bilden i rutor använde jag mig av "view-Change Grid and Guide Properties...". Redan här ska vi sätta värdena för hur vi vill ha rutorna på vår kalender. Jag vill ha fyra rutor på bredden och sex rutor på höjden. Jag delar då in höjd och bredd i fyra respektive sex delar. För bilden med mina mått blev inställningarna följande:
 
 
Klicka OK och din bild kommer upp med rutor placerade på bilden. Har du gjort rätt inställningar ska du nu ha 24 rutor på din bild.
 
 
Nu är det dags att sätta siffror på dina blivande luckor.

Du väljer nu "Layers-New raster Layer" för att få ett nytt genomskinligt lager att sätta dina siffror på.
 
 
Nu ska vi ställa in vad för text du vill skriva dina siffror med. I vänsterkanten har du ett "A" dvs "Text-tool". Klicka på den.
 
 
Klicka nu på bilden där du vill ha din första lucka (den går att flytta). Nu kommer automatiskt en ruta upp där du sätter vilken font du vill ha, vilken stil och storlek. Kanske du behöver prova dig fram vad som blir bäst. Du kan även ändra färgen genom att klicka på "Fill". Här har jag valt röd. Jag har också valt att texten ska vara "bold" så den blir lite kraftigare. Var också uppmärksam på att "Create as" har följande inställningar: Kryss i "Antialias och en liten prick vid "Floating". Skriv nu in första siffran och klicka Ok.
 
 
Vill du att dina siffror ska ha en skugga för att bli lite fylligare gör du så här: Placera din siffra där du vill ha den. Välj "Effects"- 3d Effects- Drop Shadow.
 
 
Här ska du igen göra lite inställningar. Inställningarna på bilden tycker jag blir bra men du väljer själv. Bara att experimentera!

 
Nu gör du på samma sätt med sifrorna 2-24 som du gjorde ovan. Nu ser det ut så här :
 
 
Än är det inte klart. Vi ska nu dela upp bilden i delar, dvs "luckor". Välj "File"- Export- Image Slicer. Denna bild kommer upp. Klicka på "Grid". (1.) Sedan på bilden till höger (2.) Inställningar för "Grid Size" (3.) kommer nu upp. Ställ in värden som på bilden då du vill ha sex rader och fyra kolumner. Klicka Ok.
 
 
Innan du går vidare så ändra "Grid-tool" till "Arrow-tool", d.v.s pilmarkören längst upp till vänster. Du ska nu också se att den översta vänstra rutan på din bild nu är markerad med en grön ruta. Den rutan ska nu länkas till ett dokument och till javascriptet du får nedan.
 
 
Skriv in:
URL: javascript:openPopUpWin('2', '500', '500')
Alt text: 2 December
Förklaring: ('2', '500', '500') Siffrorna från vänster till höger betyder helt enkelt; Lucka 2, 500 pixlars höjd på dokumentet som öppnas och 500 pixlars bredd på dokumentet som öppnas när du klickar på din färdiga kalender. Vill du ha annan storlek på fönstret som öppnas får du ändra värdena här. Klicka på "Save". Spara dina filer i en mapp och döp den till t.ex. "julkalender2004.html" som filnamn. Gör på samma sätt med nästa lucka. Glöm inte att ändra 2:an i URLadressen till 15 (i mitt fall 15. Min nästa lucka har ju siffran 15.)
 
 
Gör så med alla luckorna.
 
Nu är allt klart med själva bilden. Nu ska bilden kopplas samman med html-koden som PSP har genererat till oss. Jag gör alltid mitt i "anteckningar". Du väljer vilken html-editor du föredrar. Öppna nu ditt dokument "julkalender2004.html". Mellan <HEAD> och </HEAD> ska du klistra in koden i rutan nedan.



<script language="JavaScript">
<!--
/***This script is created by Catja Bjermo sottsaltsurt[x]hotmail.com. Script, dokumentation & tutorials can be found at http://bjermo.se. This script is free to use as long as you keep this lines in the script***/ /*
function: openPopUpWin
parameters: pageURL, width, height
pageURL opens in new window
*/

function openPopUpWin (doorNum, width, height) {
var myDate = new Date () ;
var month = myDate.getMonth () +1 ;
var day = myDate.getDate () ;
var thePage="dec" + doorNum+".html" ;

if (month==12 && doorNum<=day) {
winSettings="\""+
"toolbar=0," + //0 for no tool bar and 1 for tool bar
"scrollbars=0,"+ //0 for no scrollbars and 1 for scrollbars
"location=0,"+ //0 for no location bar and 1 for location bar
"statusbar=0,"+ //0 for no status bar and 1 for status bar
"menubar=0," + //0 for no menu bar and 1 for menu bar
"resizable=0,"+ //0 for not resizable and 1 for resizable window
"width="+width+
","+
"height="+height+
"\"";
popupwin = window.open(thePage,"",winSettings);

}
else window.alert("Häpp häpp, inte öppna i förväg!");
}
-->
</script>
 
Värdena i scriptet kan du ändra. "if (month==11 ändrar du till 12 när du ska lägga ut kalendern. 12 står för månad tolv, d.v.s December. Står det 12 när du provar den i November kan du inte öppna den utan du får upp dina felmeddelande du skrivit. D.v.s i detta fallet "Häpp häpp, inte öppna i förväg!". Ändra ditt meddelande till vad du vill. Alla värden under "winSettings" har jag satt till noll. Jag vill inte ha scrollister och dyl. på mina PopUprutor. Ett tips till... tänk på om du t.ex har din hemsida på passagen att varje PopUpruta också får reklamlist upptill. Detta måste räknas med i måtten du sätter i ditt HTMLdokument d.v.s " javascript:openPopUpWin('2', '500', '500')" bör kanske få större värden om du t.ex ska visa en bild i din PopUpruta.

Nu måste du också ha dokument som ska öppnas när din besökare klickar på en lucka. Döp de dokumenten till "dec1.html", "dec2.html" o.s.v.. Det är viktigt att det blir just de namnen för att det ska fungera med detta javascriptet. Spara! Öppna nu ditt HTMLdokument och se om din kalender fungerar.