How to Map Image Using Gimp 2.6 and Uploading it

Step 1. – Open up Gimp.

Step 2 – Open the image that you want to map. In this example, I’m going to use my drawings and linking them to the full views.

Step 3 – Go to FILTERS > WEB> IMAGE MAP

Step 4 – Then this window will pop up. This is what you are gonna be using from this point on. This is where you map the image and put links in them.

Step 5 – This is the tool that you need when you are selecting a section in the image to map. The square will give you a 4 sided shape, The circle will give you a round shape and the one under that is your custom shape. In this example, I’m going to use the Rectangle Selection tool.

Then, using the tool that you’ve chosen, select a part in the image, then double click after you’ve selected it.

Step 6 – This window will pop up. This is where you paste the URL of where you want this selection to be linked to.

Step 7 – Copy the URL.

Step 8 – Then paste it under where it says
“URL to activate when this area is clicked: (required)”

Then after you have customized how your link will work, click “OK”.

This link will show at the right sidebar of the window. You can change it anytime by double clicking on the URL that you want to change.

Step 9 – Just repeat step 5 – 8 until you’ve finished mapping what you want.

Step 10 – Then click “SAVE AS”

Tip: Save this where you can find it easily.

Step 11 – Close Gimp after you’ve finished mapping. Then go to the location where you saved your .map and right click on it. Click “OPEN WITH” and open it using “Firefox”

Step 12 – Then go to VIEW>PAGE SOURCE (Ctrl+U in Firefox)

Then copy everything that’s in this window:

Step 13 – Then paste everything in your blog (or where ever that allows to put HTML)

Step 14 – Upload the image that you used before you mapped the image somewhere like Photobucket, Flickr or on you website. All you need is the image URL of this picture alone

Tip: Make sure you used the same image because if it’s smaller or bigger, the coordinates wouldn’t match.

Step 15 – Copy the file URL

Then paste it in the highlighted part in this image:

Tip: Do not delete the “” marks. And remember to put the URL between the “” marks.

Then you’re done!

I hope that this helped (at least). I tried my best to make it really clear so yeah

Don’t forget to look at my art as well!

I have other Gimp Tutorials:

> How to Color Anime Hair Using Gimp

> Change Eye Color That Looks Realistic Using Gimp 2.6 (with guide pics.)

> How to make inner shadow using The Gimp 2.6(with guide pictures)

Here’s the example that I used and the finished product!