How to Link Map an Image

I link map images as part of my day to day regular job, and I was so happy when I transferred that skill over into blogging! I link mapped my Winter Wish List for this post. and linked that baby up right! I also link mapped the image I use for my site navigation on my side bar, so it’s a really useful tool to have in your repertoire. Now, I’m here with the steps so that you can add a link mapped image to your blog! On we go!

First, you will need an image with multiple components you’d like to link to. Whether you’re featuring clothing, accessories, beauty products, home items, whatever, gather all of your images together and make a collage in PicMonkey or another photo editing tool. Make sure you save the links to all of the images you’re using, or any affiliate links you’ll be using. I like to copy and paste anything into an open Notepad file.

Second, upload that image to Google Photos or another host, and save the URL for the image. You get this by right clicking on the image, selecting “Copy image URL” and pasting that into the Notepad file.

Third, grab the code below, it will be your template for the code you will use. This one is built in for 3 clickable areas. To remove one area, remove the section of code that begins with <area and ends with </area>. To add additional clickable areas, copy and past any of the sections of code that begins with <area and ends with </area>. Paste that into your Notepad file.

Name of Main Image Name of Main Image Name of Main Image What you would like to display if the image doesn't render

Fourth, it’s time to get the coordinates for the clickable areas of your image. This is probably the most difficult part, but once you do this once, it will be smooth sailing! Just like on a map, coordinates are 2 numbers, separated by commas, indicating the location of something. In this case, we use four coordinates in pixels to represent the area that you would like clickable to a certain URL. Here are my steps to get them:

  • Open up your image in Paint. Decide which area you’re going to map first. For this example, we’re mapping the gray sweater. Note the total image size in pixels (px) on the bottom of your screen, we will need that for later. This image is 700x1000px (width x height).

  • In order to get the top two coordinates, place your cursor as close to the top left corner of the image as possible. In the bottom left hand side of Paint, you will see a set of coordinates in pixels (Here they are 525,232px) jot those down in your Notepad. We only need the numbers and comma, not the px.

  • In order to get the bottom two coordinates, place your cursor as close to the bottom right corner of the image as possible. In the bottom left hand side of Paint, you will see a set of coordinates in pixels (Here they are 699,440px) jot those down in your Notepad.  We only need the numbers and comma, not the px.

Now you’re ready to head to the code template I provided for you. Here it is all gussied up where I’ve highlighted the areas we will be editing. With all html, it’s a lot of repetition, so once you do one section, it’s a matter of repeating it over and over for each clickable area. I’ve included instructions on what to paste where in the “map” (<map to </map>).

You should have all of the components below in your Notepad file, and some of it will come from your head, like the image name and description, as well as the alt tag for SEO purposes. Where there are quotes in the code, always leave those, you’re only replacing what is inside the quotes.

I’ve indicated the 3 main parts you are replacing for each “area” (<area </area>): the image URL, the main image name and the image description. You will notice that there are 4 coordinates for each “area,” which you will have stored in your Notepad- you will paste those after coords= leaving the ” on either side, as well as including the commas between each number.

I spaced out my highlighted sections over the 3 clickable areas in this map, so as not to have my notes too jumbled together, but you would updated all 3 parts for each <area </area> in your code. If you have more than 3, you will need to update these parts more than 3 times.

For the last “image” portion (<img />) you will add in your alt text for SEO, your height and width from when you originally opened the image, and the same image map name that you used above, with the addition of a #. This is only done once per image, that tells the code where to get the pretty collage that you created.

All of the other code remains the same, and you can copy and paste this into your blog editor once you’ve updated the appropriate sections!

I hope this helps you all with link mapping- keep an eye out for more link mapped images here at SnapGinger, and more posts in Blog Life!

Any questions, leave them in the comments below! 


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s