Pinterest Stumbleupon Whatsapp
Ads by Google

create an image mapHave you ever wanted to add an image map to your web site?  An image map is a graphic that contains hotspots that link to URLs.  They are used as a means to give a web designer greater design flexibility in that they can insert links almost in any place they desire.  Yes, image maps can help that much.

There are several pieces of design software that can help a designer to create an image map, but many of them are very expensive.  I have chosen to learn how to use GIMP because it is free.  Follow these simple steps to create your own image map using GIMP.

1. Create Or Find The Image You Want To Use

Any image will do and a lot of it depends on what you are trying to accomplish as a designer.  I have seen image maps where faces are clickable which bring you to the bios on each person.  For this example, I will be adding several graphical logos that I will later make clickable.

how to make image map

2. Open The Image Map Editor In GIMP & Start Mapping

Once you have the image where you want it, find the menu Tools –>Web –>Image Map.  This should bring up the image map editor where you are offered several tools. You can use different shapes to accomplish the effect you desire.

Ads by Google

create an image map

There are also two workspaces: the image map and the list of links you have mapped.

how to make image map

Using the editor should prove to be self explanatory.  Basically you use the shape tool most conducive to covering the area you want to be linked to the URL.  You will notice that as you finish each shape, a pop up appears for you to fill in.  The most basic settings to fill in are on the first tab.  Fill in the address and the ALT text and you should be fine.

how to make image map

3. Get The Code

It’s good to know that after all of the designing is done, what you need in the end is the code.  You see, image maps are actually written in HTML and in order for you to actually get the image map up and running on your site, you will need to grab the code.  With GIMP, this is easy to do.  Just go to View–>Source to view the source code.

You’ll notice that I highlighted a part of the code.  This is the address where the image being mapped is located.  If the file containing the code and the image file are not in the same directory, you’ll want to put the correct location of the image there.

4. Test The Image Map

If you save the file, you will notice that it is nothing but a file containing the code but with a file extension of map.  Change the file extension to HTML, make sure there is no period in the front of the file name, and make sure the image is in the same folder as the HTML file and you should be able to test it.  Double clicking the HTML file should open it in your default web browser.

create an image map

There you have it, a free and easy way to create an image map for your website using GIMP.  Do you create image maps?  If so, what tools do you use to do it?

  1. Chick
    November 12, 2015 at 10:10 am

    Excuse me, can you build Image Map with popover when mouse over/click the image?

  2. Miss Phree Betancourt
    July 8, 2015 at 7:13 am

    Okay so i created the clickable link, when i open it with my browser it goes right to the image and i can click on it and it brings me to the link. NOW i want to put my clickable link on my profile but when i try to paste the html code from the clickable link opened in my browser, it wont show my clickable link..just the code....Whats going on help!

  3. Guest
    August 12, 2010 at 2:01 pm

    I was wrong, fortunately. If you create the file .map and you don't make any change to it or to the image file, it should be possible to open it with the image map working area:
    File > Open
    In particular, you should not rename files or tags. This means that you should replace "alt" with "title" (see my previous post) only at the very end of your work or you should copy file1.map to file2.map, make manual changes to file2 while opening file1 with gimp. If you rename files, you should also change (manually) the first line of the .map file.

  4. timmyjohnboy
    August 11, 2010 at 5:16 pm

    I believe the .map file is just an exported file containing the code for the image map and not intended to be reopened by GIMP. I too wish there was a way to save work and return to it again.

    Thank you for the compatibility tip. I will make note of it.

  5. Guest
    August 11, 2010 at 9:31 am

    Thank you for the very useful tutorial.
    Once the .map file has been created, I have tested the image map and I have closed gimp, how is it possible to change it? If I do the same procedure, Filters –>Web –>Image Map, gimp does not open automatically the old file .map and I don' t arrive to open the file .map directly.
    I add a side comment. Once a clickable area has been defined, the working area allows to fill the "Alt" field, corresponding to the text appearing when the mouse passes over the area. However, it seems that " Alt" does not work with Firefox and Google Chrome. I have manually edited the file .map and replaced "alt" with "title" and now it works.

    • timmyjohnboy
      August 11, 2010 at 3:16 pm

      I believe the .map file is just an exported file containing the code for the image map and not intended to be reopened by GIMP. I too wish there was a way to save work and return to it again.

      Thank you for the compatibility tip. I will make note of it.

      • Guest
        August 12, 2010 at 12:01 pm

        I was wrong, fortunately. If you create the file .map and you don't make any change to it or to the image file, it should be possible to open it with the image map working area:
        File > Open
        In particular, you should not rename files or tags. This means that you should replace "alt" with "title" (see my previous post) only at the very end of your work or you should copy file1.map to file2.map, make manual changes to file2 while opening file1 with gimp. If you rename files, you should also change (manually) the first line of the .map file.

        • timmyjohnboy
          August 12, 2010 at 5:58 pm

          Thanks for correcting that. It is really good to know.

  6. Guest
    August 11, 2010 at 11:31 am

    Thank you for the very useful tutorial.
    Once the .map file has been created, I have tested the image map and I have closed gimp, how is it possible to change it? If I do the same procedure, Filters –>Web –>Image Map, gimp does not open automatically the old file .map and I don' t arrive to open the file .map directly.
    I add a side comment. Once a clickable area has been defined, the working area allows to fill the "Alt" field, corresponding to the text appearing when the mouse passes over the area. However, it seems that " Alt" does not work with Firefox and Google Chrome. I have manually edited the file .map and replaced "alt" with "title" and now it works.

  7. Kokipinto
    July 13, 2010 at 5:02 pm

    Thanks for the tutorial...

    • timmyjohnboy
      July 13, 2010 at 5:43 pm

      No problem, I love helping others with stuff like this:)

  8. luisj
    July 10, 2010 at 8:01 pm

    It´s not
    Tools –>Web –>Image Map
    as you say, but
    Filiters –>Web –>Image Map

  9. luisj
    July 10, 2010 at 6:01 pm

    It´s not
    Tools –>Web –>Image Map
    as you say, but
    Filiters –>Web –>Image Map

    • timmyjohnboy
      July 13, 2010 at 3:22 am

      Thanks. What you say is true.

  10. Srivatsan Venkatesh
    July 9, 2010 at 3:25 pm

    Can you do this in Paint.NET? I avoided gimp because it seemed so complicated.

    • timmyjohnboy
      July 13, 2010 at 3:35 am

      I avoided GIMP for the longest time because I had Fireworks on my laptop. Since I've been using Linux instead of Windows, the GIMP was one of my only options so I have determined to learn it. If you are determined and you are willing to look up tutorials, the GIMP isn't all that bad.To answer your question, I believe there is a plugin for paint.NET that will allow you to make image maps. My advice? Hit up the answers section of this site and someone's bound to help you out:)

  11. Aibek
    July 9, 2010 at 6:52 am

    hey Tim, thanks for the tutorial. I always wanted to learn how to do this.

    • Gdjohnson2
      July 10, 2010 at 6:52 am

      What version of GIMP are you all using? I'm using 2.6.8 and there's no such thing as tools -> web.

Leave a Reply

Your email address will not be published. Required fields are marked *