Image Mapping Tutorial

Here's a little disclaimer: I've learned all that I will explain here by trial and error, and simply playing with it. If you know this sort of thing better than me, pleasepleaseplease comment below and share for easier techniques! Always remember to back-up your blog before editing!

I've been doing some work on my sidebar lately, and have decided to venture into the world of image mapping. Using image mapping allows me to have fewer image codes in my layout - my social media icons (from here) are all one clean image. Before cleaning it up, my images weren't completely centered and I wanted to scoot my social media icons to under my picture.

Click to enlarge

So I went to Photoshop and plopped them all into one image. I added a Facebook button, since I've recently made a new Facebook page for LWC Wonderland!

Click to enlarge

Now I need to make my social media icons click-able. This is where image mapping comes in handy! I went to Imgur and loaded my new sidebar photo up there. (Remember to save it as a .png file first!)  In another tap, I opened up an image mapping site and pulled up the exact same file I upladed onto Imgur. I clicked "Start Mapping" and then "Click to continue" on the next page. Finally, I'm on the page where I will map my picture. Right click to get the menu you need, and then click on "Create Rect" or "Create Circle" if you want. I decided on creating a rectangle despite the fact that my icons are circles because it will give me a little bit more "click-able" room.

Click to enlarge

A little box will appear. I move it over my first icon and move the corners until it covers the area I desire. You can drag the dialogue box out of the way if you need to.

Click to enlarge

Hit save on the dialogue box. Do the same thing for each of your icons. If you do not like how one of your boxes turned out, you can double click it to edit.

Click to englarge

Once you have finished mapping your boxes, right click and select "Get Codes". A large dialogue box will appear. Select the middle tab that says "HTML Code" and scroll all the way to the bottom of your dialogue box using the exterior page's scroll bar. Oh, look, there's all the HTML mumble-jumble.

Click to enlarge...but do you really want to see a larger picture of html?

Open your Blogger layout and either open the gadget where you will be throwing this data or create an HTML/JavaScript gadget. Clear out your previous social media icons and, in my case, your photo and bio.

Click to enlarge

Then, paste the first two lines of code. You will then replace the image map link with your Imgur link (but only the code between src and png. Mine looked like this:

<img id="Image-Maps-Com-image-maps-2014-10-10-164234" src="//i.imgur.com/qUVQw3G.png" border="0" width="390" height="1315" orgWidth="390" orgHeight="1315" usemap="#image-maps-2014-10-10-164234" alt="" />

<map name="image-maps-2014-10-10-164234" id="ImageMapsCom-image-maps-2014-10-10-164234">

Get your Imgur code out of this box:
 

Click to enlarge

Now, here is where it starts to get tricky. Type:

<area shape="rect" coords=

After this, copy and paste the set of coordinates found in the third line of code on the image mapping site into your gadget. Then hit space and type href= and, in quotation marks, the link to your first social media site (starting with http://) according to your icons. For me this will be Twitter. Then you will type:

alt="YOUR SOCIAL MEDIA SITE" title="YOUR SOCIAL MEDIA SITE" />

The last part is what message will show when the icon is moused over, so it doesn't necessarily need to be the name of your social media site. Here is what mine looked like:

<area shape="rect" coords="0,581,68,650" href="http://www.twitter.com/bethdotlove" alt="Twitter" title="Twitter" />

Do this for all of your other links except e-mail. When you reach your email icon, you plug in your coordinates the same as before but after you type href=,then type:

"mailto:YOUR EMAIL ADDRESS HERE" alt="Email" title="Email" />.

And since you always finish what you start with HTML, add
to the end. Now save and check it out! Hope this helps you in your formatting adventures!