How To Create an Image Map for Your Twitter, Facebook and YouTube Accounts

An image map is nothing more than a clickable image that can replace, in this case, your Facebook or Twitter button.

The best aspect of an image map is you can define more clickable areas within the same image. Also you can define the shape of each area - circle, square/rectangle, polygon, etc. - and you can ad a title suggestion as to inform your readers about the landing page they will be taken to if they click on a certain area, on the image. The title suggestion is shown if one hovers the mouse cursor over the image.

Being able to create an image map for your social media accounts gives you more freedom to add your personal touch to, otherwise, a standard button. As long as you have an image editor you can do anything you want.

You should be aware that the image map can help you spice up your blog or website in various other ways. Let's say, for example, you have a blog about guitar lessons and you notice that readers tend to read three major posts. If you want to give your fans a faster and more intuitive way to get to those three posts, you can do it by creating an image map and placing it on the top of your sidebar. The image may consist of three symbols that each relate to the topic of a particular post, thus your readers will be visually urged to click on the image and read your guitar tips and tricks.

Here's the image map (and the HTML code) I use for my social media:

<img src="http://www.mediafire.com/imgbnc.php/6fa44b98b043e2d85bd3a2f070e5d74b4g.jpg" border="0" usemap="#Social_Media_Connect" /> <map name="Social_Media_Connect"> <area href="http://www.facebook.com/profile.php?id=563019460" target="_blank" shape="rect" coords="0,0,55,51" title="Connect with Me on Facebook" /> <area href="http://twitter.com/highballsport" target="_blank" shape="rect" coords="55,0,109,51" title="Follow Me on Twitter"/> <area href="http://www.youtube.com/catascouts" target="_blank" shape="rect" coords="109,0,220,51" title="Visit my YouTube Channel"/> </map>

And here are the explanations:

• The red line represents the link where the image is hosted. I use Media Fire for image hosting. I recommend you to sign up with them and host your images on your own account. If you take the code above (including the image link) and, for some reason, I delete my image later from my Media Fire account then you'll end up with a blank space instead of the social media image.
• The blue lines represent the URLs from my social media and YouTube channel. Replace these lines with your URLs, unless you want your visitors to land on my pages :-).
• The green lines are the suggestions that users will see when they hover their mouse cursor over your image. You can add whatever message you want but try to be brief and relevant.
• The purple lines define the shape of the clickable areas, in this case rectangles.
• The orange lines represent the coordinates of the clickable rectangles. The values indicate where a rectangle starts and where it ends by plotting the upper left corner (first two values) and the bottom right corner (the last two values). Use the syntax coords="left, top, right, bottom" and view the image below for better reference.

• The gray lines are the attributes of the area/anchor tags ( <area/> - <a>....</a>) that enable pages to be opened in new windows or new tabs in your web browser. The target="_blank" attribute can be used every time you add a link if you want to open the target page in a new window; Blogger doesn't have this option so you have to do it manually for each link in your post, in HTML view. Example: <a href="http://www.highballblog.com/" target="_blank">Highball Blog</a> - this piece of code will open Highballblog.com in a new tab (in Mozilla Firefox).

Give it a try! And if you want a colorful image for your social media image map then copy the PNG at the beginning of this post, have it hosted somewhere and use the above code as explained. Please note that the image width is 220 pixels.

For more information on how to create image maps visit this site.

Enjoy blogging!

---

Thanks for stopping by! Share this article with your friends.