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!

 

 

Author

I'm a mom to twin boys that make me laugh and scream in the same breath. It is possible. Married to a pretty great guy that always encourages my crazy ideas. Run an online shop, sew almost every day and have been know to eat marshmallows while hiding in my pantry. And feel it's my life's mission to make others laugh and sew. Not always in that order.

15 Comments

  1. 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

    • 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.

  2. Pingback: Some things I want to try from Pinterest - Tina Gray {dot} Me

  3. 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

Write A Comment