Menu
Business / Tutorials

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!

 

 

15 Comments

  • Kendra John
    November 6, 2012 at 11:43 am

    I didn’t know about that site! haha! I always do it the hard way! duh! So cool! :)

    Reply
  • Lucy Jane
    November 6, 2012 at 11:51 am

    YAY, Kendra! I’m always looking for the lazy girls’ way of doing the hard stuff. ;-)

    Reply
  • Julie S.
    November 8, 2012 at 2:47 pm

    How awesome! :) My struggle is MAKING the image in Illustrator or photoshop!

    Reply
    • Lucy Jane
      November 9, 2012 at 5:22 pm

      Maybe I should do a tutorial on that too. ;-) Good idea!

      Reply
  • Audra Michelle
    November 23, 2012 at 11:09 am

    THANK YOU!!!! I have been wanting to do some really cool things in my header and sidebar but had no idea how.

    Reply
  • Rachel
    November 23, 2012 at 11:21 pm

    this is fantastic! thank you! (found via pinterest)

    Reply
  • joana | myseastory
    November 27, 2012 at 3:38 pm

    this is awesome, thanks for sharing!!
    my only problem is that below the image on the widget i have the titles which i left blank, so it says untitled four times – any idea on how to correct this?
    xx j

    Reply
    • Lucy Jane
      November 28, 2012 at 7:58 am

      After you upload your file, it will take you to the screen where you can map your image. You should un-check the box that says “show text links”. Try this and see if you still have the problem.

      Reply
  • […] lucyjanetotes.com via Tina on […]

    Reply
  • Debra
    February 1, 2013 at 1:48 am

    Lucy!
    Thanks to your tutorial I’m ‘this close’ to figuring this out. Thankyou!
    But like one of the commenters above me…it’s the designing of the image that’s holding me back. I have not been able to create anything in pscs6 that I love as much as the one you created. Consider selling a template of your image map?
    Thank you aagain for the tutorial and am really enjoying discovering your blog!
    Debra

    Reply
  • Nat
    July 18, 2013 at 4:37 am

    That’s pretty much useful. Thank you for sharing it.

    Reply
  • gerri willis
    January 5, 2014 at 8:12 pm

    Thanks Kim! I needed to figure this out for a project I had set aside. Now I can finish it!

    Reply

Leave a Reply