How To Make Image Maps Using GIMP

[dodgerblue 0]

Like I said in my GIF tutorial, GIMP's as good as Photoshop (or even better) and it's totally free, so.. obvious choice, really.

 

The latest stable release is 2.2.7 or if you prefer to live on the bleeding edge, you can get the 2.3.0 or 2.3.1 development releases from https://www.gimp.org/

 

Windows users please take note that you have to install the GTK runtime environment for it to function. You could get it from https://www.gimp.org/windows/ but I think I got mine from sourceforge.

 

 

OK so if you're all set now, you can start up GIMP and you're ready to follow this tutorial

 

 

Step One - Open the image you want to make into a map

 

Open it with GIMP, of course.

If you have other image editors set as the default, don't double-click on the image file. Right-click and select "Open with..." and choose GIMP.

 

 

Step Two - Set View to 100%

 

If your image file is big (or sometimes even if it's not) GIMP will display it in the workspace at a zoom level of 67% (normally, but if it's huge, it might display at a smaller zoom).

 

I find it easier to set the view back to 100% so I can have a proper view of the image.

 

Go to the fourth menu called "View". In the dropdown box, the third option reads "Zoom (67% or whatever value)". Hover over this option, then another menu will popup on the right. Select "1:1 (100%)".

 

Now do whatever you like to the image, cut it, zap it, burn it, then when you're finally satisfied with the image and ready to make it into a map, save it (as a backup).

 

 

Step Three - Opening the ImageMap Editor

 

Now, go to the menu called "Filters". This is the 9th menu from the left, just between Dialogs and Script-Fu.

 

There'll be a whole list of stuff you can do to your image. What we are looking for is ImageMap. This can be found in the third section of the dropdown.

See where there's a line across and below that the option reads "Glass Effects"?

The very last option before the next line across reads "Web". Hover over it, and select ImageMap.

 

 

Step Four - The ImageMap Editor

 

Now your image will be opened in a new window, and the titlebar reads <Untitled> - ImageMap.

 

Your image will be displayed on the left, and the edit box on the right. The edit box is named "Selection" and is where the details of the selections like URL or iframes are stored.

 

On the far left there's a toolbar. You will see the following buttons

1) a black cursor arrow - for selecting shapes (to edit)

2) a blue rectangle - for selecting rectangular sections

3) a blue circle - for selecting circular sections

4) a blue odd-shaped button - for selecting sections with more than 4 corners

5) a ghosted-out tool-like button - for editing

6) a ghosted-out trashcan button - for deleting

 

 

Step Five - Making the links in the ImageMap Editor

 

Let's say I want a rectangular section of my image to be linked to a page on my site called "main.html".

 

Click on the second button for selecting rectangles. Go to the area where you wish to have linked to "main.html".

 

Here's where a bit of imagining and estimating is needed. Try to imagine where the top left corner of the rectangle will be. Click on the spot that will be the corner, and a point will be anchored. Now move the mouse right and down as much as you want. The area covered will be the size of the rectangle.

 

When you're satisfied with the size, click again. This point will be the bottom right corner. A dialog box should pop up asking you to fill in the details of this rectangle.

 

Pay attention to this field "URL to activate when this area is clicked (required):"

This is where I would enter "http://forums.xisto.com/no_longer_exists/".

 

Notice also the tab "Javascript" at the top. If you want, this is where you can add fancy effects whenever someone hovers over that particular section (if you know how).

 

When you're done, click on Apply and then OK to be returned to the main ImageMap editor screen. Now you can see on the right that there's a new selection with the blue rectangle icon and the URL of the link.

 

Play around as much as you like. Try out the circle and polygon buttons to see what kind of shapes you can select.

 

 

Final Step - Generating the source code

 

When you're done and satisfied with the map, in the ImageMap editor, click the third menu "View".

 

Now click on the option "Source".

 

A dialog box pops up displaying the HTML code which you can select to copy and paste into your HTML editor.

 

 

Congratulations, you've successfully made an image map! Whee

 

 

* If you found this tutorial useful, you might like to read my other GIMP GIF tutorial.

* For more information on GIMP, you can check out the documentation at https://www.gimp.org/docs/

[BuffaloHelp 24]

Nice! An excellent tutorial. Just the other day, we had a member who asked how to make one of the images to be able to do this. I can't find that thread at this moment but when I do, I'll come bank and link that topic on this post. I believe that user will get a kick out of seeing tatatee's tutorial.

Edit: The question was posted on this thread.

Edited June 20, 2005 by BuffaloHELP (see edit history)

[M67 0]

Maybe add more pictures ? but that is a really helpful tutorial

[round 0]

My opinion is that image maps are outdated and not worth the trouble plus they cause problems. Search engines have never been too too fond of them, and if you were to cut up your image you have tons more alt tags which search engines really do love.
http://forums.xisto.com/no_longer_exists/

[dodgerblue 0]

Well I've never wanted google to crawl my site, and I hate it when my images show up in google image search I'm weird like that. So it's perfect for me, really.