How to Create an Image Map Using Gimp

Step-by-Step Guide

1. 1

   Step 1: Put together an initial graphic that you will be mapping.

   You can use pictures, images, whatever works for you.
   
   Here, we will use LifeGuide Hub, LifeGuide Hub forum, and iGoogle.
2. 2

   Step 2: After creating the image

   The Gimp ImageMap dialog screen. , In this screenshot, LifeGuide Hub is selected.
   
   Fill in the necessary information in the dialog screen that comes up.
   
   Click on rectangle and you can see the exact location of the graphic. ,, GIMP will automatically offer to save this as a file with a .map extension.
   
   If you wish, you can save it as that.
   
   But this file contains the HTML code (no images) that we need to edit and copy over into our own web page, so it is recommended you save it as .html and skip directly to step
   7. , You may receive a warning about changing file extensions.
   
   Click yes to continue. , You will notice this file simply contains a list of coordinates and URLS.
   
   This is the code that tells a browser which URLs to assign to which part of your image. , Failure to correctly point it to the image may lead to no image being displayed at all. ,, You will need to copy ALL the lines of code you see, including the <img> tag (which defines the path to your source image) and everything between the <map> tags.
   
   That's it! You're done.
3. 3

   Step 3: (or opening it)

4. 4

   Step 4: go to Filters >> Web >> ImageMap.

5. 5

   Step 5: Click on the rectangle at the right of the screen

6. 6

   Step 6: then select one of the images that you want to use.

7. 7

   Step 7: Continue this process for the rest of your map.

8. 8

   Step 8: Once you have finished defining all the link areas

9. 9

   Step 9: save your image map.

10. 10

    Step 10: IF you haven't saved it as an HTML file

11. 11

    Step 11: find your saved file and rename the extension to .html.

12. 12

    Step 12: Use a text editor to open this HTML file.

13. 13

    Step 13: Ensure the file path defined in <img src> links to the image you want the URLs mapped onto.

14. 14

    Step 14: OPTIONAL: Use a browser to open your HTML file; if everything works

15. 15

    Step 15: you should see the image with all the URLs mapped onto it according to the areas you defined.

16. 16

    Step 16: Add your image map into your web page HTML.

Detailed Guide

About the Author