Image Mapping in Gimp

Thu, Dec 30, 2010, by SeriousSabotage

Browsers

A basic how-to for Image Mapping in GIMP, and how to insert the image in your blog (Blogger). Image-mapping is the ability to link different parts of an image, such as a web page menu.

  1. Open up GIMP on your computer. 
  2. Open the image you want to map (File>Open)
  3. Go to the Image Map menu (Filters>Web>Image Map)
  4. A new window will pop up with your image in it. To make your first link, select the rectangular shape on the right menu. Hold down your left mouse button and drag over where you want the link to be. Click again to release the marquee line. 
  5. Another window will open. Select the radio button for “Web Site”. Then, type, or copy/paste the website into the first line. Hit “Apply”.  
  6. To link an email address, click the “e-mail” radio button. The text “mailto:” will pop up in the space. Type the email address after those words (no spaces in between the email and words!). Hit “Apply”. 
  7.  To embed your image map, you need to first upload the photo or graphic you used to a site like Photobucket, or ImageShack. Then, go back to the image map window. Go to View>Source.
  8. Copy the source code that appears in a pop-up window. 
  9. Now, log into Blogger.com. Go to the design tab of your blog. Hit “Add Gadget”. In the window that appears, click “HTML/Javascript”. 
  10. When the new window appears, paste the source code into the main body box. (I normally leave the title blank.) Go back to the image that you uploaded onto a photo-hosting website. Find the direct link, which is normally found under a “Link” or “Embed” title. Copy that. Go back to your gadget code, and look in the first line. See how mine says <img src – “somethingsomething” ? You need to paste the code where I’ve highlighted below, in the somethingsomething part. Do not delete the parenthesis! The code will NOT work if you do!  
  11. Hit “Save”. You’re now DONE! If you have to resize the image, you will have to redo the image-mapping. 

           

Wasn’t that easy? 

6
Liked it
Leave a Reply
comments powered by Disqus