How To Create An Image Map Using GIMP

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.

create an image map

Ads by Google

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?

Ads by Google
Comments (17)
  • Miss Phree Betancourt

    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!

  • Guest

    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

    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

    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.

  • Guest

    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

      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

      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

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

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.