The Easy (and Free) Way to Create an Image Map

Image Map? Say what now? You have probably seen them and not known what they are called. Image Maps are the fancy term for images that link to several different sites. They have a variety of uses for bloggers and are easy to create, even for people that are afraid of html.

I have two on my other site right now. One is an image of the 11 hosts of the Happiness is Homemade link party. If you click on any one of our faces it will take you to our individual sites.

The one I created, and took screen shots for this post, is for all of the social media accounts on my About page.

 

Create and upload your image

I use Canva to create most of the images on this site, but you can use any program you want. I left plenty of space around the logos so people will be less likely to click on the wrong one. Besides, I am trying for a decluttered look on both sites these days.

IMPORTANT: Be sure the image is the size you want it to appear on your site. If you resize the image once it is on your site all of the links will be in the wrong places. Learn from my experience.

 

Upload the image to your site. I use WordPress, so all I need to do is select Dashboard> Media > Add New. For Blogger, I think you would add it to your Blog Photos album in G+.

Copy the image URL (not a post where the image might be used.

Create the map

There are a few sites out there, but I used Image Map Generator which is free. Unfortunately you will not be able to save your file and edit it. As I found out when I had to redo it three times... make that four times when I added my new You Tube channel today.

Choose Load Image from Website and insert the URL of the image from your site. Image Map generator does not save your image. Other computers need to know where to find the image, and they can't access your PC. If you opt to Select Image from My PC instead then you have to paste in the image URL in the right spot in the code once you place it on your site.

Below the image the "active" button will show you which line you are working on at the moment. I am using a rectangular shape for mine. But you can choose a polygon or a circle instead.

Add your Link and Title. The Link is where you want it to go and the Title is what appears when users hover over the area.

Finally choose any special attributes you want the link to have. Did I lose you HTML-phobes? I want my links to open in a new window when users click on it so I chose "_blank". You can get an explanation of the other terms here. If you don't care, leave the dashed lines.
Go up to your image and place a start and an end point around the area you want the link to appear. You can move the little circles until it is just where you want it. For a polygon just keep clicking to get more little circles and drag them around until you get the "click area" where you want it.

To add more link areas, click on Add New Area.Rinse and repeat until you have all of your links.

Click on the "Show Me The Code" button when you are done.

This is computer to talk to tell other computers to make your image go to another page or site if someone clicks in a certain area. You do not need to understand it, just copy it.

DON'T CLOSE THAT WINDOW YET! Check it out on your site before closing the window. Once you close it you have to start all over again.

Add the Code to Your Site

I put my image on my About page. You may not know where you want yours to go yet, so create a test post to try it out. Call it Image Map Test and save it as a draft so it doesn't actually post to your site until you are ready.

Select the "Text" view and paste in the code you copied.

 

If you accidenatally created the image from a photo on your PC, despite my warning, here's how you'll need to finish it. Upload the image to your site as explained above and copy the image URL. Come back to your Map Code and insert the image URL in place of the name of your file on your computer (mine is social media map.png). Put it in between the quotation marks.

 

Do a Final Check

Save the post and view it. Put your image map through it's paces. Hover over it, click on it to check every link is wher you want it and goes where you want it. If something is wrong you can go back to the Image Map Generator, make your changes and then copy and paste the code again.

 

How might you use an image map? Tell me in the comments below.