About this tutorial

Nov 23, 2008 by Ann

The copyright for this tutorial belongs to HeavenDreams. The original is written in German and I asked for permission to translate it to English. Thank you so much, Micki ! Please, if you have a minute visit HeavenDreams. Or visit her blog which is worth a peek and leave a message in her shoutbox, HD Blog.

To make it easier for you Micki allowed me to rename everything German in her tutorial, including all the html files. And I made new screenshots with our actual Advent Calendar, Dec 2008.

Terms Of Use

Oct, 2008 by HeavenDreams

Please make sure to follow the terms original by HeavenDreams, translated by Ann

You can:

You can use this tutorial to make calendars for your website. Please link back to this or the original tutorial. You can share the link to this tutorial.

You cannot:

You cannot copy and paste the tut to your website. You cannot translate it without permission from HeavenDreams. Just ask her, she is a great lady and won`t say no.

Basics

Nov 23, 2008 by Ann

This tut will show you how to make a calendar using the Image mapper in PSP. You need a bit of knowledge in HTML. The Java-script used is from ROFL. You can find lots of great scripts there.

Trick

This script makes sure that the calendars doors can`t be opened before the specified day. Those who try to open a door too early will get a popup window telling that they have to come back later.....lol

Steps

First things first

Make a folder called calendar
Download the zip
Unzip all contents to your calendar folder

Get the zip with all necessary files here..
The zip contains the original design by HeavenDreams. You can change it to your liking.

Let`s do it

Nov 23, 2008 by Ann

Prepare your main image now and arrange the numbers 1 - 24 on it. It might be a good idea to put every number on a separate layer. This way you can move them around until you`re happy with the layout. Make sure you use a color that makes all numbers visible on the background. You can use a brush to mark them but that is up to you. I used the brush provided by Heavendreams. It`s included in the zip.

Save often to be able to change the layout whenever you want to.

Are you done with the main image ? Take a deep breath and open it in the image mapper. The image mapper will define areas on your image which will be linked to other pages later.

You will get a preview like this.

At the top you see a preview of your main image. There are several tools to choose from: The hand (7) lets you move the image in your preview window. The shapes 3,4,5 are to mark your numbers in different shapes. Use the hand tool to move the image and mark every number. Let`s start at the top left with the rectangle shape and drag a rectangle around your first number.

As long as this shape is active you can resize it by clicking on those small squares and drag. In case your not happy with the position you can move with the mover tool (2) or delete with the eraser (6). Your selections will be colored as followed: green is the active selection, red the inactive ones.

After you selected one area you have to enter the URL (8) This is the URL for the html file which will open when clicked on that assigned area. We are working with a java script. Instead of a URL we will enter the following: javascript:RO(1)

The text entered in the ALT field will show when moused over that area on the finished image. It`s an option, you can enter whatever you like. For a calendar like this one dates might be a good choice. We`ll leave the target empty because we`re working with a script. (without the script you would enter blank, parent and such here)

You have your first area mapped. Continue with all numbers and change the URL for each assigning the doors of your calendar: javascript:RO(number of each door)

When you`re done with all numbers choose the format to save your image and check the optimize settings. Save as , save to the folder where you have the zip contents. PSP will save an image file and a html file.

Your html file opened as a text file would look kind of like this:

Copy the part I marked red and paste it to the Advent.html file where it says:
< --enter your Image-Map data here-- >

Last you will have to make goodies for all those pages .html to give away for the season.

Incase you have questions feel free to mail me:
Mail me
I will answer questions but cannot help you with all the html stuff. That is a whole tut by itself.

Have fun !!!