Image Map Tutorial

Programs Needed

Tutorial

  1. Open Paint Shop Pro.
  2. Open your image.
    Navigation
  3. Go to File > Export > Image Mapper.
  4. Select the Rectangular Mapping Tool Rectangular Mapping Tool if the link areas are rectangles. Otherwise, select the Freehand Mapping Tool Freehand Mapping Tool.
  5. Click and drag around the first link area.
    Link area selected
  6. Repeat step 5 for each link area.
    Note: If you cannot see the entire image in the preview pane, use the Zoom Out Tool Zoom Out.
  7. Select the Arrow Tool Arrow Tool.
  8. Select one of the link area surrounded by a red line. When you click on it, it will become green.
    Link area selected
  9. In the "URL" box, put the address of the page you want this area to link to.
  10. In the "Alt Text" box, put the title of the page you are linking to.
  11. If you want the link to open in a new window, select "_blank" from the drop down list beside "Target".
    Cell properties
  12. Repeat steps 8 - 11 for each link area.
  13. Click the "Save" button.
  14. Type in "imagemap" in the filename box. Click the "Save" button.
    imagemap.html
  15. Type in a name for the image map in the filename box. Click the "Save" button.
    baionavigation.gif
  16. Click the "Close" button.
  17. Open the folder where you saved the files.
    Windows Explorer Files
  18. Right click on "imagemap.html" (not the image file).
    Right click options
  19. Choose Open With > Notepad. If you do not see Notepad in the list, go to Choose Program and select Notepad (or another word processing program).
    Open with options
  20. This is the image map code. Remove everything between and including <html> and <body> at the beginning. Remove </body> and </html> at the end.
  21. Upload the image map to the internet. Do not upload imagemap.html, you only need to upload the actual image. Check out the Uploading Tutorial for help.
  22. Replace the part of the code that comes after "src" (in the code below, BAIONAVIGATION.gif) with the address of your image map from your image host.
    <img alt="" name="imagemap0" src="BAIONAVIGATION.gif" height="132" width="209" border="0" usemap="#imagemap">

Image Map Example

HomeAboutRulesCodesJoinUpdateMembers