The Image Map Tool: Greatest gimp feature created for any web-builder.
Part I: Building the Map
Have you ever seen one of those very cool images or maps where you can click in different places on the image----but it's only one image?
That is either a Flash application, or it's an image map. Image maps are very commonly used throughout the internet.

In this tutorial, I will show you how to use the GIMP's tool that is the equivalent of a photoshop 'slice' for any PS users.

Starting off, we open the image we want to create an image map over.
This is mine:

Now, click filters>>web>>image map. A window will pop up.
This is what it should look like, without the lines and text:

Explanation:
A: Pointer Tool - Allows you to click around;normal cursor mode.
B: Rectangle Select - Allows you to map rectangular regions.
C: Elliptacle Select - Allows you to map elliptical regions.
D: Polygon Select - Allows you to map polygon regions, where you specify the sides.
E: Edit Area Info - Allows you to edit the currently selected area's settings (e.g., link, javascript...).
F: Delete Area - Deletes currently selected map region.
G: Zoom - Allows you to zoom into areas to get a clean cut.
H: Grid - Allows you to display a grid over the image, making it easier for you to get square cuts.
I: Map - Image preview where you draw the map with the tools A,B,C,and D.
J: Selection List - Displays all areas of the map.


Ok, now we know what the tools do---so next, click on a tool of your choice, and select the area you want to map, and another dialog should pop up.
The window:

I suggest you only fill out the first tab, and don't switch to the other tabs unless you are an advanced user.
It's straightforward, so i'm not gonna go over it. If you need help with this part, post. Don't touch the select buttons at the top.
Press ok, and keep selecting regions until you are done with your map.

Now, click "view" on the image map tool and click "Source...", and copy the text.

Finally, paste the code into your webpage's source, and change the src="" to the location of the image.

Congratulations, now you have a really cool logo, a great effect, and a professional look to your webpage.

To see what the tool can do, go

HERE

Part II: Putting it to Use
Most probably, all image maps you see on the web will not just contain links---they'll contain little flashy things that highlight if you put your mouse over. I'll discuss two ways to do this.

Subsection I: Multi-Image
The longer, but easier way.

First, open up the image you used in part I for your map. Now, with the rectangle tool, select a rectangle over the region of the map, in the REGULAR GIMP IMAGE WINDOW. Not in the image map window. This we are doing to the image itself. Try to match the rectangle with the region of the map your selecting.

Go to the layers dialog. Dialogs>>Layers, or ctrl+L for windows users. Click the new layer button.

Now, select your bucket tool. In the bucket tool settings, select "fill whole selection".

Fill in, on the new layer, the rectangle you selected earlier with white. Now, go to the layers dialog again, and set the opacity of your new layer to around 30, or whatever floats your boat. Now merge the two layers and save the image, but with a new filetype. DO NOT OVERWRITE YOUR OLD IMAGE, YOU WILL NEED IT! Save this as "x_y.z", where x=the name of your original image, y=a number, and z=your image filetype. Save without the quotes. This is how your image should look:

That is a part that you have to use your good judgement on, if white doesn't suit your image, then fill it in with grey or another color.
Repeat this with all of your links, remembering to advance the number at the end of your filename.

Now, go to your HTML page and add the image map code to it. Now, here comes the tricky part.

JavaScript Test, VERY BETA:



Now, you have to modify the area map code to make it switch the image. This is VERY tricky. Please read everything carefully, and i'll explain this as best I can. Pay attention to everything, and it'll be a snap to figure out and remember. Here we go.

This is something like what your map code should look like.

Suppose we were going to change the image as if your mouse were over the gimptalk link.

<area shape="rect" coords="90,240,180,255" alt=".:GimpTalk:. ~ GIMP Help & Tutorials" href="http://gimptalk.com" />
If X=The URL of your gimp talk image and Y=The name of your link then this is what we add:


<area onclick="switchImg(this,X)" id=Y shape="rect" coords="90,240,180,255" alt=".:GimpTalk:. ~ GIMP Help & Tutorials" href="http://gimptalk.com" />
Meaning, you have to add
to the every area thing.

Your image map is DONE!
UNDER CONSTRUCTION, COMING SOON!!!!

thanks, awsome tut! :h:

No problem, any time. Did you find any parts difficult to understand?

not to me, perfectly clear!

Thanks for the tut. And to answer your question, everything was easy to understand and follow. Great job!

Full of information with quality writing.
Moved to official illustrated tutorials.

Thanks for sharing.

The next tutorial should be on making the icons glow or somthing when you put the cursor over them.

Thanks Ali, I appreciate it. :h:

Icon glowing is unfortunatley not just gimp work. You would need some javascript/html. I might do it though, and just give the code pre-done.... hmmm.....

Wow, nice tut. I did not know about any of this.

YAY!
thanks you so much for this. the javascript part is easiest part though; just go to some site and get some code.

That part of the tutorial is under construction. The first sub-section will be done by tomorrow.

Almost done with the tut. I'm just working on the javascript part, and then i'll post the complete thing. For now, you can start working on the areas i've already covered.

Great tutorial, very helpful.

Thank you that will be very helpful. :h:

This is a n00b question, but if i wanted the whiole site to be a picture what size should i make it?

It's not reccomended that you make a whole site one picture, as then it takes forever to load the thing.

thanks I'm new to Gimp, and love webdesign so this helped out alot, if you want check out my site, freewebs.com/superzippergirl (thats where i used this, i havn't gotten it up yet so some of the links will bring you to broken profiles, but i'm proud of the image. I havnt' gotten to the second part of the tut yet but i still love it ^_^

Really awesome tutorial!:w:

Um...you know, the Image Map works very well indeed for me but if i need it for a site that only allows BBcode, then what should i do?

wow, very nice tut, easy to fallow too.

I'm glad all of you like it!
@superzippergirl: Nice site.
@Dark Aurora: You can't do an image map with bbcode, sorry. Ask the admin if you can post the html.
@gowness: I'm glad it was easy to follow, that's what i was aiming for when I made it.

Wow, nice tut! :l: I love HTML, so i love Image map!

Sigh...alright, thanks. :h:

EDIT: I found a way. Yay! :l:

So what file type do we save it as? Sorry if it was in the tutorial, I sort of just skimmed over it... :s:

At least if I can make this work, then my web pages won't be so boring!!! Thanks!

Wow, thats a nice tut! I'll try it later :l:

Thanks poot, i'd love to see your outcome.

Punksnowboarder, the answer is in the tutorial. You don't save the file as anything.