How To Create An Image Map Using GIMP

gimplogoplg   How To Create An Image Map Using GIMPHave 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.

GIMPimagemap image   How To Create An Image Map Using GIMP

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.

GIMPimagemap editorimage   How To Create An Image Map Using GIMP

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

GIMPimagemap twoareas   How To Create An Image Map Using GIMP

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.

GIMPimagemap linksettings   How To Create An Image Map Using GIMP

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.

GIMPimagemap code   How To Create An Image Map Using GIMP

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.

GIMPimagemap test   How To Create An Image Map Using GIMP

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?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

16 Comments -

0 votes

Aibek

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

0 votes

Gdjohnson2

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

0 votes

Srivatsan Venkatesh

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

0 votes

timmyjohnboy

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:)

0 votes

luisj

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

0 votes

timmyjohnboy

Thanks. What you say is true.

0 votes

luisj

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

0 votes

Kokipinto

Thanks for the tutorial…

0 votes

timmyjohnboy

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

0 votes

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.

0 votes

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.

0 votes

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.

0 votes

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.

0 votes

timmyjohnboy

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

0 votes

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.

0 votes

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.