The Style Sample | Cincinnati Brand Stylist | How To: Create Image Maps for Your Blog
Style + Branding + Digital
branding,stylist,cincinnati,fashion
3387
post-template-default,single,single-post,postid-3387,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.7,side_area_uncovered,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

How To: Create Image Maps for Your Blog

How To: Create Image Maps for Your Blog

You know those online collages that let you click on different pictures to go to different sites, like in a blog post, email newsletter, or on a Facebook landing page? There’s a good chance it was an image map.

Image maps allow you to hyperlink areas of a single image to various URLs (websites) without “slicing” the image into separate files. They come in handy when you want an easy way to create a composite image without having to create complicated tables and style sheets.* Here, I’ll show you how to create your own click-able collages!

Making Image Maps the Easy Way

There are several ways to make image maps, but if you don’t have Photoshop or Fireworks and are too lazy busy to determine a bunch of map coordinates, you can create one using a (free!) site called image-maps.com. Here’s how:

Step 1. Create your image.

I use Photoshop, but you could use The Gimp, Pixlr, SplashUp, or any number of free photo editors.

Step 2. Upload your image to the web.

You can upload it to your site (I use WordPress, so I uploaded mine to my Media Library) or a free image-sharing site like Photobucket.

Step 3. Open your image in the mapping tool.

Copy the image URL (http://yourimage.jpg), go to www.image-maps.com, and upload your picture using the “from a URL” option. Once the upload is successful change the “Base URL” to the site where your image is hosted. Since mine is hosted on my site, my base URL is “http://TheStyleSample.com”.

Step 4. Start mapping!

The “rectangle” option is easiest, so just click the “Add rectangle” button, place and resize the rectangle around the area to be hyperlinked, then enter the URL that part of the image should be linked to. The Title/Alt text will be used as the text link, so make sure it’s descriptive.

Step 5. Get  your code.

Once all the areas are hyperlinked, click Get Your Image Map Code and go to the HTML tab to copy the code.

Step 6.  Add the code to your site.

Go to your site (or your Facebook page or email template) and paste the code into the HTML editor. Just a warning: on WordPress sites, it’s best to disable the visual editor (Users> Your Profile> Disable visual editor when writing)before pasting the code into your post, otherwise WordPress magically (and annoyingly) erases it.

That’s it! Here’s the map I created with this exercise:

*Note that in most cases, image maps are not considered a best practice. If you have the time and ability to slice, code, and link multiple smaller images, you should. If you need help with that, get in touch!

16 Comments
  • mexbiuri

    September 1, 2011 at 8:58 am Reply

    Thank you very very much!! This was super helpfull xoxo <3

  • Rebelucion

    September 1, 2011 at 5:31 pm Reply

    Whew! You just propelled yourself into SuperAwesome stratosphere.
    The sheik, wise, and truly powerful SHARE their knowledge.
    Humble & Bril, that’s you.
    Thank you, cuz while I am tech literate, all that stuff you shared still looks like Arabic character alphabet to me!

    • tamia

      September 6, 2011 at 11:38 am Reply

      Haha! It’s really not that confusing once you know what you’re looking at, I promise!

  • Juli

    September 1, 2011 at 10:48 pm Reply

    Super cool, I will try it 🙂
    Thanks for the help

    http://iartfashion.blogspot.com/

  • Lovely Links: 9/2/11

    September 2, 2011 at 4:13 pm Reply

    […] Check out this fabulous tutorial on how to make image maps for your blog or website. […]

  • Thash

    September 3, 2011 at 12:45 am Reply

    Thanks for this tutorial, as a new blogger I’m really grateful for it! 🙂

    • tamia

      September 6, 2011 at 11:41 am Reply

      No problem, glad it was helpful!

  • Septembre

    September 3, 2011 at 4:36 pm Reply

    Thank you so much for this! This will be very useful for upgrading/improving my blog.

  • diana

    September 3, 2011 at 7:23 pm Reply

    Thank you so much I always do it on polyvore but this is a better and easier way 🙂

  • Sheena

    September 5, 2011 at 3:29 pm Reply

    This is an awesome tutorial! I’ve been meaning to do a few posts that utilize image maps and this is a wonderful refresher!

  • Denise

    September 20, 2011 at 9:01 am Reply

    Awesome! I saved your blog post until now and just tried it with my new post and it’s so easy!
    This saves me a lot of HTML-code typing 🙂

    • tamia

      September 21, 2011 at 8:15 am Reply

      Glad it was helpful, Denise! I definitely don’t have the patience to figure out coordinates and type all those individual numbers into the code, so I love this image mapping tool.

  • t olugbala

    September 29, 2011 at 12:08 pm Reply

    thank you so much for this sis! i’ve been trying to figure out how to make my images look more “professional” forever and this tutorial did just the trick!

    • tamia

      September 30, 2011 at 8:58 am Reply

      Great, glad it helped!

  • […] T: What to Wear to Speak to Magazine Editors | Easy DIY: Painted Necklace | How To Create Image Maps for Your Blog | DIY Fashion: Elastic Elation | Tumblr Tuesday Creative Inspiration | Unpopular Fashion Opinions | […]

  • Andie P.

    August 20, 2013 at 4:30 pm Reply

    Thank you so much for this great advice! It has been made very useful here, on our blog at PH! Great site, and we look forward to many more entries!

Post a Comment