• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Munofore
  • Crafts
  • Gardening
  • Self Care
  • Home
  • Humor
  • Blogging
  • Random Thoughts
menu icon
go to homepage
  • Crafts
  • Gardening
  • Self Care
  • Home
  • Humor
  • Blogging
  • Random Thoughts
  • follow the fun

    • Facebook
    • Instagram
    • Pinterest
    • Twitter
  • subscribe
    search icon
    Homepage link
    • Crafts
    • Gardening
    • Self Care
    • Home
    • Humor
    • Blogging
    • Random Thoughts
  • follow the fun

    • Facebook
    • Instagram
    • Pinterest
    • Twitter
  • ×

    Munofore is a participant in the Amazon Services LLC. Associates Program. This site contains affiliate links to various websites, including Amazon.com. Purchases through these links help support this blog at no additional cost to you. read more

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

    Feb 7, 2017 · 16 Comments

    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.

    How to Create an Image Map for free. The easy way to create an image that links to multiple places.

    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.

     

    « A Little Dose of Happy with Cute and Funny Groundhog Memes (Friday Frivolity)
    Valentine's Day: Lady Gaga, Red Rain Boots and Trolls on Friday Frivolity »

    Reader Interactions

    Comments

    1. Amethyst | One Sage Mama says

      February 09, 2017 at 8:07 pm

      This is super cool! I never considered making one of these but it's so useful to know how. I am going to try one for my social links like you did. Thanks for linking up! #fridayfrivolity

      Reply
      • Audrey Humaciu says

        February 10, 2017 at 3:46 pm

        They come in handy and I wrote the post mainly so I can look it up if I do it again. ha ha!

        Reply
    2. Haley Bradley says

      February 16, 2017 at 9:51 pm

      That is very cool Audrey! I don't mind messing with a little HTML but some things are a pain. And this seems so easy!

      Reply
      • Audrey Humaciu says

        February 17, 2017 at 3:34 pm

        I am not sure I could figure out the points for the links without a tool like this one.

        Reply
    3. Joel says

      February 23, 2020 at 7:08 pm

      Awesome, thank you very much.!

      Reply

    Leave a Reply Cancel reply

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    audrey humaciu in kitchen

    Welcome

    I'm your hostess, Audrey, an avid "maker" that believes home made is better.

    Whether it's cooking, crafting, gardening, home décor, even blog design, I love making and growing things... even if I make a mess in the process.

    Discover more about me →

    Seasonal Projects

    • top down view of dried rose shadow box
      Make a Dried Rose Shadow Box Display to Preserve Memories
    • A Big Hug Card craft for kids
      A Big Hug Card Craft for Kids
    • supplies for red envelope making with text overlay "free printable Red Envelopes for Chinese New Year"
      Free Printable Red Envelopes for Chinese New Year
    • collage of video game themed Valentines with text overlay "25 free printable video game valentines"
      25 Free Printable Video Game Themed Valentines

    Popular Posts

    • elderly woman with family in the background and text "Sudden Dementia Could be Life Threatening."
      Sudden Dementia in the Elderly Can be Life Threatening
    • collage of pallet planters with text "DIY pallet planters: 2 ideas"
      DIY Pallet Planter: 2 Ideas
    • top down view of dried rose shadow box
      Make a Dried Rose Shadow Box Display to Preserve Memories
    • collage of plastic fruit containers with text overlay "Creative ways to upcycle plastic clamshell containers"
      Awesome Ways to Reuse Plastic Fruit Containers

    follow the fun

    • Bloglovin
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

    Footer

    ↑ back to top

    About

    • About Munofore
    • Privacy Policy, Cookie Policy and Disclosure

    Newsletter

    • Sign Up! for emails and updates

    Contact

    • Contact
    • Work with Me

    As an Amazon Associate I earn from qualifying purchases.

    Copyright © 2023 Munofore