A lot of sites these days are doing image mapping; it seems to be the next best thing to actually having a sidebar navigation; maybe even better? Even MisterUnscripted.com has some image mapping on a few features, so I thought I would share my knowledge of Paint Shop Pro, and write a tutorial on how to image map. I hope it really helps, and your image turns out great!

First, you need to choose a layout header with text on it. If you haven't added the text to your layout yet; add such text. You can use whatever words you want to be linked.

Next, you need to choose the IMAGE MAPPING tool. Under FILE, scroll down the list to EXPORT, then open that list, and choose IMAGE MAPPER.

A new popup window will appear, and this is the IMAGE MAPPING tool. Choose the NAVIGATE option, and you can move around your image. Beside this ption, are the zooms, which you can use to see closer details, or to see the entire image as a whole. Navigate to your text, and possibly zoom to get a better view.

Now, this is where the task gets complicated. Choose your tool; point to point, rectangle, or circle. I chose point to point, because it's easier to get the text properly outlined with that tool. Once you have chosen your tool, simply outline the text that you want mapped. Once the outline is complete, connection dots will appear around the green outline; time to choose your URL. I chose owner.php, because I outlined the OWNER text, but you can choose whatever you want. Repeat this step for all the different links in your image.

Once you have finished all your mapping, click SAVE AS at the bottom of the popup. Another popup box will appear; it's time to save your coding, first. Save it as index, or something else. It will be in .html, but just choose a name for now. Then, choose save; make sure you have chosen a location on your computer for where you are saving it, or it will automatically save to your DESKTOP. After you have chosen to save, another popup will appear; you are saving your image. It is an automatic .gif save, so name it, and then save it to the same place as your coding. Not choosing a location will save it in your DOCUMENTS folder. To change the way it saves; .gif, etc., you need to change it before choosing SAVE AS on the main popup. There's a place where the text says; .gif, and there is a choice option; choose your preferance.

You can now edit your coding, and insert it into your layout coding, and make sure you take the img src= coding as well, as there is a special code in that coding that makes the image mapping active. To change the image name, simply edit it in the coding, and rename it accordingly.

Congratulations! You have finished your very own image mapping! I hope this tutorial really helped you, and good luck with your site!