How To Create An Image Map

My inner nerd is going to surface and you may just be surprised at the cool thing I figured out.  I wanted to add my own social icons and have them be clickable.  Here was my image…

 

After doing a LOT of google searches, I discovered a really cool trick.  And why not share it with some friends?

I will walk you through how to take a picture and make different areas of it clickable.  I’m thinking style boards can have a whole new life!  Put on your nerdy cap, cause we are about to go on an adventure.

Create an image in Photoshop or Illustrator.  I used illustrator for this example…

(and yes, I am a bad speller, and yes, I know that instagram is spelled wrong)  Ha!

You are then going to save your image…

Next, you are going to upload that image to create a URL for it.  I uploaded mine to my wordpress library, but you can also use something like Photobucket.

This is when it gets fun.  This website provides free software to create image maps for your image – www.image-maps.com.  This is just a fancy way of saying that they do all the hard coding part for you and make your picture click-able.

Input your picture URL here…

Click “Start Mapping Your Image” … then click “Continue to Next Step”

Change the Base URL to your website.  For instance, I would change mine to www.LucyJaneTotes.com.  This is very important, so that your code is correct!

Now start mapping your image…

Now “Get Your Code”

For my image, I placed the code into a sidebar text widget.  For a post, you would just copy and paste into your post. Remember to paste the code under the HTML tab on your post.  Easy, right?

Go ahead, click on my sidebar image…it works!

 

 

Leave a Comment

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