PSP tutorials

IMage Mapping

Ok, Image mapping is clicking on an image and it doing something, If you don't know what I'm talking about look at the end result and hover over the words. Now let's start on how we are going to make this. And make sure you follow every rule OTHERWISE.. You will be stuck with a broken un-mapped Image.

First of all you have to have an Image with writing on it here is mine.
(Click to Enlarge the tutorial pictures)
CLICK TO ENLARGE - TEENROYALTY18.PICZO.COM

Make sure you have the text etc and thats how you want the image to look.
NOTE: You cannot edit this image from this point

Now open it on Paint Shop Pro if you haven't already
Click File > Export > Image Mapping

Something will pop up,
Click on the rectangle tool like this..


Now wrap the Tool around the place where you want to be able to click, Here is my first one:


NOTE: If you canot see your image use this tool (Pan Tool)

Drag your mouse to where you want to highlight your link.

 
Now where it says:
URL: Put in the URL of the site you want your visitors to go to when they click that part of the image

Alt text: When the cursoe hovers over the image, (where you highlighted in green) will show up in a little box. (if you don't know what this is just put and explanation of what happens there.)
Eg. Where it says 'Home', I want my Alt Text to say "Click Here to go back home!"

Target:
Type in what you want to happen to the link when you click on it. I want mine to open a new page so I typed in "_blank"
 
KEEP THE FORMAT AS A JPEG OR GIF (not PNG)
 
 
Now do this to all of your link images. Like this..
 
[NOTE; Do not copy or cut anything from this point, otherwise it will not work]

Click Save to Clipboard
And then save it to somewhere you can find it, Eg. Destop? or something
 
DO NOT SAVE YET!
 
Then Click onto your piczo site or freewebs whatever. Open an Html Box (for piczo) and Click Ctrl V or Right Click and Paste,
As long as you paste the HTML code into the box, if it didn't work then you must have done something in between where I told you not to Copy or cut anything.
 
[If  you are experiencing that it won't paste then you have to click Save to Clipboard again]
 
Here is what my code looks like 

Where it says src="your file name here"

Now keep this HTML box open and go to a image uplading site like
www.imageshack.ws
www.photobucket.com

And get the image code and put it in there so now my code looks like this


Now look at my Mapped image

Go back HomeSITE.COMFOR YOUGraphicsHelp

COPYRIGHT (C) TEENROYALTY18.PICZO.COM