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:

Boy by Band of Outsiders sweater | YSL Gold-plated chain necklace | Topshop Trilby hat | Kate Spade Robin bag | Preen Razor Skinny trousers | Belle by Sigerson Morrison flats

*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!

You'll also like:

A few (more) gray hairs later, I finally got ‘er done. Check out the newest issue!

You'll also like:

The socio-economic implications associated with style of dress makes fashion a topic worth talking about in my opinion, but this post about Why Fashion is Worth Blogging About does a great job of breaking it down for those who don’t quite get it.  Be sure to check out some of the comments, too.

“You should be passionate about what you do for a living, and don’t let any fool tell you otherwise.” Advertising copywriter Derek Walker’s account of What I Learned From an Old White Man I Never Met.

The Do-First Work Ethic: Cool vid from the founders of Threadless on falling into a business and doing stuff by…doing stuff.

CreaWriter Is a Distraction-Free Writing Space Complete with Relaxing Ambient Noise. Bring it. I need as few distractions as possible–my brain is distracting enough. (Windows)

Looking for a more systematic approach to social strategy? Try the POST Method.

Inspirational article about doing what you love – and sharing the success that follows.

The popularity of Snuggies (I won’t front–I have one and it’s darn comfy) has spawned a plethora of comfort-first “fashions”, including Pajama Jeans and the Hoodie Footie Snuggle Suit. No really, that’s what they’re called. I haven’t been feeling well for the past few days, so they both sound like GREAT IDEAS to me! I dare you to watch the videos and tell me you don’t agree.

You'll also like:

Sorry I’ve been MIA…then again, my name is TaMIA. Corny, I know… Let’s move on:

Become a social media guru in two minutes or less, now available with cassette tapes! Who knew it was so easy?

Ah, the green screens of the Apple IIe bring back so many computer lab memories. Anyone else remember desperately hoping the weather cooperated when playing Lemonade Stand, learning the difference between prime and composite numbers with Number Munchers, and dying of dysentery (seriously, every time) playing The Oregon Trail?

We girls can do anything (as long as we have our half-caf soy mocha lattes), right Blogger Barbie?

How is Stephanie Seymour still this hot? Does she have some kind of pact with el diablo? Where can I sign up?

Creating your own deadlines and setting aggressive goals for your business. Can (and should) be applied to personal projects, too. Ahem.

Why small actions are more important than big plans. Tip: “You can jump in anywhere in the process to get it going.”

French retailers revolt against e-book hegemony. The publishing world is getting ugly as traditional and new media collide, and it’s gonna get worse before it gets better.

Alexander McQueen’s death left me shocked, then sad, then confused, then kinda pissed. Why? Is it ever really that bad?

You'll also like: