All the yarn things…right to your inbox. Sign up here.

How to Create and Use Image Maps on Your Blog

by | Blog

Image_Map_pinnable
Have you noticed how sometimes as you move your mouse, the linked page changes?  An easy way to get this feature on your own blog is to use Image Maps, which maps specified coordinates to a particular link target.  This comes in especially handy for navigating social media icons and collages made from different images.  This also removes the need to upload multiple images and trying to line them all up together!

Let’s say you’re trying to create your own social media icons.  Head on back to Part 1 of this tutorial, How to Create Social Media Icons using Ribbet, and check it out.  Once you have your image, you are ready to map it!

1. Go to www.image-maps.com, upload your previously saved image, and click on ‘Start Mapping Your Image’.

One Dog Woof: How to Use Image Maps

2.  You’ll be taken to an intermediate window that you can just click through.  On the right hand side, you’ll be given the choice to using a rectangle mapping or a custom shape mapping.  Choose ‘rectangle’.  This will open up a mapping box on your image.  Adjust and place the box over an icon, and enter in the link for that icon.  You can also enter in a title for that link.

Also, make sure to un-check the ‘Show Text Links’ box on the right hand side-bar.

One Dog Woof: Learn Image Mapping

3.  Keep adding mapping areas and adding links to each icon.  Once you are done (I only mapped one for this example), go to the side-bar and click on ‘Get Your Code’.

One Dog Woof: Use Image Mapping

4.  This image ended up a bit screwy on my screen, but you basically pick the 2nd tab, ‘HTML Code’.  Copy the code.

5.  Enter the code to your website.  Remember to upload your own copy of the icon image and replace the image-map image code with your own uploaded image code in the HTML.

If you are on the Blogger platform, go to Layout -> Add a Gadget -> HTML/JavaScript.  Enter the copied code, save it and refresh your blog.
On WordPress, go to your sidebar widget or header and add in the HTML code, save and refresh.

That’s it!  The important thing is to have the image ready and know where it’s going to go.  Since mapped images are instantiated as HTML code, the same code can be reused over and over again in different parts of your blog.  …like below!

20 Comments

  1. Katy Board

    I’m definitely going to be looking this over more closely once I’ve had some sleep – I think it’ll be a huge help to me, as I’m not very computer-savvy – many thanks for posting it 🙂

    Reply
  2. Bethany

    Hmmm…I think I could possibly do this, so kudos for making such an easy to follow tutorial!

    Reply
    • ChiWei

      Thanks Bethany! I use image maps everywhere!

      Reply
  3. Steph @ meet.make.laugh.

    Great tutorial. Will definitely have to play around with this! I get so lazy sometimes with blog design…. need to spend some time on it!

    Reply
  4. Marilyn

    Awesome post…Pinned it for future reference! 😀

    Reply
  5. ต้นไม้

    Hello there, You have done an excellent job. I will definitely digg it and personally recommend to my friends.
    I am sure they’ll be benefited from this web site.

    Reply
  6. Ramsons & Bramble

    Some wonderful technical tips on this website. Thanks for helping me beautify my blog!

    Reply
  7. Isabel

    Firs time her, and Love your site! Than you for sharing!

    Reply
  8. Rachael

    Hi! Just wanted to give you an FYI that the images are not working on this page.

    Reply
    • ChiWei

      Thanks for the heads up Rachael! It should be fixed now 🙂

      Reply
  9. Kerry Willard Bray

    So glad I stumbled upon your blog! Cannot wait to give this a try! Thanks so much for sharing these details and so many other fabulous blogging tips!

    Reply
    • ChiWei

      You’re so welcome Kerry! Glad I can help 🙂

      Reply
  10. Amanda @ Cutitvate Create

    Hi! Image-Maps has a new format and now I can’t get it to work! I would love to see an updated tutorial if possible. Thanks so much!

    Reply
    • ChiWei

      The concept is still the same. I think you have to right-click to get the rectangle mapping tool to start.

      Reply
  11. becca

    hi, I just followed this tutorial and now I have a blank screen (of death!)!! How do I fix this? How do I even get to where I can login again? Everything is just white when I try to do anything!! I was working on a blog for one of my friends and now I am afraid I broke it! Please help!!!

    Reply
    • ChiWei

      Hi Becca, I’m so sorry, but there’s really no way for me to help you directly. You can probably try to get into the back-end file system and remove any changes from the files you touched. Hope that helps a little!

      Reply
  12. Cynthia

    Hi! Just wondering how to upload my own copy of the icon image to replace the image-map image code with my own uploaded image code in the HTML for my blog??

    Reply
    • ChiWei

      You should be able to upload as a media file or upload directly into your cPanel filesystem.

      Reply
  13. Troy

    This post was exactly what I was looking for! Quick question…I’ve figured out what to change the image source to (my media URL), but what should I be changing the image id to? When I’ve tried to change it then my map doesn’t work, and I’m afraid that since the site only hosts the images for 24 hours, my map will be inactivated after that! Thank you so much for this tutorial!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *