How To Create An Image Map Using GIMP

Ads by Google

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.

Ads by Google

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?

Ads by Google

16 Comments - Write a Comment

Reply

Aibek

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

Gdjohnson2

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

Reply

Srivatsan Venkatesh

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

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

Reply

luisj

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

timmyjohnboy

Thanks. What you say is true.

Reply

luisj

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

Reply

Kokipinto

Thanks for the tutorial…

timmyjohnboy

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

Reply

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.

Reply

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.

Reply

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.

Reply

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.

Your comment