Create an Image Map for Your Blog

‏Here we go. Decided to share my adventures in image maps because I 
made so many mistakes along the way, I’m sure many others will do
the same. Wanted to alleviate others of the headache.First. If you
are familiar with Gimp, great! Use it and go on with your bad self! 🙂
For all of the rest of us that are not familiar with this thing called
Gimp ( I am still very much a novice, but learning ), there is a very
easy mapping site called image-maps.com. So .. Here we go … Here’s 
what you do. I should have started out a lot easier than I did for my first one, but ..

I didn’t.

This was my first attempt in Gimp … was a crash and burn. BOOM! None of
the links worked!

 

 

 So, I made another one that was a bit easier to follow along with.

If you’re adventurous, get in there! 🙂  But, I would advise starting out
a bit simple for the first one.  Let’s get started! 

 

 

Have your image or graphic on your blog server where all of your 
blog images are stored.

Open up your image on your blog photo server and right click to 
get the URL address for your image.

Go the the website image-maps.com on your web browser in a 
separate window.

Paste the URL address of your image in the blank box where it asks 
for it. Click “Browse for File”.

In the next screen your image should appear. Click “click 
to continue”.

Follow the directions that appear for bringing up the menu 
(PC or Mac).

Time to start mapping – bring up the menu and decide if you want 
your first link to be a rectangle, circle or polygon. Click whichever
shape you would like.

♥Rectangle – move the rectangle box that appears over the area you 
want to link, adjusting the size as necessary. In the options tab
that has appeared, paste the website in the “Map URL” box that you 
would like this rectangle to link to, type the title that you would
like to appear when the cursor is over the link in the title box,
and any alternative words in the alt box. Next go the the events tab,
and change the target to your liking (“_self” will open the link in 
the same window, “_blank” will open the link in a new window). Finally 
click “save”. The area to be linked will appear in red.

♥Polygon – Use your cursor to click points where you want your linked 
area to be. In the options tab that has appeared, paste the website in
the “Map URL” box that you would like this polygon to link to, type the 
title that you would like to appear when the cursor is over the link in
the title box, and any alternative words in the alt box. Next go the the
 events tab, and change the target to your liking (“_self” will open the 
link in the same window, “_blank” will open the link in a new window). 
Finally click “save”. The area to be linked will appear in red. To go back 
and change any area that you set up, click on the area you set to be linked
and click “delete”. Remap your area to be linked. (I’ve not used the Polygon 
option before this how-to).

♥Circle – Point and click your cursor in the middle of the circular area 
where you want your link to be. The coordinates for x and y will appear
in the window – click “Save”. Next point and click your cursor to indicate 
the radius of the circular area where you want your link to be. The radius
amount will appear in the window – click “save”. In the options tab that 
has appeared, paste the website in the “Map URL” box that you would like 
this rectangle to link to, type the title that you would like to appear
when the cursor is over the link in the title box, and any alternative
words in the alt box. Next go to the events tab, and change the target
to your liking (“_self” will open the link in the same window, “_blank”
will open the link in a new window). The area to be linked will appear in
red.

♥To go back and change any area that you set up, click on the area you 
set to be linked and click “delete”. Remap your area to be linked.

♥Continue to map all of the areas you want linked using the steps 
above on your graphic until you are satisfied.

♥Right click “options”. The address of your image should appear in the 
“image source” box. Feel free to change the name of your image map in the 
“Image Map Name” box.

♥Next bring up the menu and click “get code”. Click on the “HTML Code” 
tab, scroll down and you will see the HTML code for your image map. COPY
ALL OF THE CODE IN THE BOX. If you leave any code out your image map will
not work properly.

♥Copy the code somewhere safe on your computer – a google doc, a word 
file and SAVE IT IMMEDIATELY. Because you did not log in to image-maps.com,
your code cannot be saved there. Once you close out the image-maps.com window,
your code it generated is gone. As long as you have saved the code somewhere
on your computer for future use, you are all set. This is because you are hosting
your own image, image-maps.com is not.

♥Copy and paste the entire code into the HTML window of your blog post 
where you would like it to appear. When you publish your post, your image
will appear and the areas you mapped will be linked.Here are a few tips
to consider when trying to make your image map:

♥Make sure you use the same size image on your post as you did when mapping – 
if you change the size the linked areas will no longer line up.

♥The links do not always work well on mobile devices. Be
cause of the change 
in dimensions on a mobile device the coordinates may change.

♥Allow yourself lots of time and start out with less complicated images to 
link up. I didn’t do this. I had to start out with a monster, of course. As
you get the hang of it, it goes much faster. Promise!

♥The only way to tell for sure if your image map is linking up correctly 
is to view it on a published post. As soon as your post is published,
IMMEDIATELY click on the linked areas of your image map to ensure they
are working properly.

I do hope this helps someone out there. Above all else, please have fun!
In Love & Light,