Below is a diagram of where all the sections of the map will take you Here's how to do it Open the image that you would like to map in PSP
File > Export > Image Mapper
If the image is too big to be seen clearly, you can zoom in or out so that you can see clearly
At the end of this tutorial I will explain why this is important, but for now, take my word for it and set your format to JPG
In an image map, you will select sections of the image that will link to the URLs that you specify. You can choose what shape you would like those sections to be. I have chosen rectangle.
Once you have chosen the shape of your section, draw the shape (in this case a rectangle) in the portion of the image that you would like to select. Do this in much the same way as you would use the selection tool while working on an image. You will notice that the shape will be green. I'll explain why that's important in the next few steps
Once you have your first section selected, type in the URL that the selected area will correspond to.
When you are done with that section, use you mouse to select the next area. You'll notice that the line around the area that you just finished turned red and the NEW selection is now green. The area that is currently being worked on will be green and the areas that have been completed will be red.
*IMPORTANT*
DO NOT OVERLAP YOUR SECTIONS
ZOOM IN IF YOU HAVE TO TO MAKE SURE THEY DON'T OVERLAP
If you find that it is overlapping, use the mover tool to reposition it
*HINT* If you mess up, there us a clear button at the bottom that will undo everything and you can start over
When you feel that you have set up your map just the way you want it, click Save As
It will prompt you to save the name of your HTML file in a folder of your choosing
Next it will prompt you to save your image. The reason? If the image that you are working on is not in the folder that you specified above, it will save it there now. You may even choose to give it a different name. That's why setting the format to jpg was important in the beginning of this tutorial.
You are now ready to open your HTML editor, and play with your new HTML file.
