Follow me:

Image Maps

Image maps are bascially where you make only part of an image clickable, so you can click many different links on the same image.

Step 1

Open up the image you want to use for mapping.

Step 2

Click the button I’ve circled below in red below called ‘Image Mapper’. If you don’t have that toolbar on your screen, right click any icon on the left of your screen and select ‘Toolbars’ > ‘Web’ and it should appear.

Image Maps Paint Shop Pro Tutorial

Step 3

Now a big box should appear. I’ve annotated the image below for you, so just read the stuff on it, then image map your image. To do this, click one of the shape tools (polygon, square, or circle), then draw around the part of the image you want to map (in my case, box one). Once you’ve filled in the URL etc., simply click one of the shape tools, draw another shape onto your image and continue till you’ve mapped everything. Then click ‘Save’.

Image Maps Paint Shop Pro Tutorial

Step 4

It will ‘save the code you just created so you can use it as an image map’. Therefore I would recommend calling it ‘imagemap.htm’ or something simple like that. Once you’ve saved the HTML document, it will ask you to choose a file name for the image as well. I would recommend also saving the image separately ‘as exactly the same name’ you saved your original image as, as it tends to come out quite blurry.

Step 5

Upload the HTML file and your image to your site, then view the page (I called it imagemap.htm). If your image map doesn’t work, check the file names in the HTML document are right for the image, and make sure the image is uploaded properly and you typed the web address right.