One thing I realized quickly after I started blogging was that there are a lot of things that I don’t know. I started seeing other blogs that had social icons that seemed to be one picture, but with links to lots of different places. At first, I thought they were just uploading lots of pictures and setting them next to each other, and I tried doing that, but it didn’t work. Sometimes, one of the links would go on the next line, or wouldn’t line up just right. I realized there was a trick that I didn’t know about. So, I did some searching, and I figured it out. So, I decided to share with you all how to map an image.
First of all, I found out that what I was trying to do was called image mapping. You map out an image so that when you click different parts, it goes to different places. The website that will help you out with this trick is image-maps.com.
Before you go to that website, you first need your picture. For this tutorial, I’ll show you how I configured my social media icons. I downloaded these icons from carrieloves.com. I used Photoshop to put them all into one picture, then I changed the color so it would match my layout, deleted the background, and saved it as a .png file so that there would be no background, just the circles.
So, now, I’ve got this:
And what I wanted was for my readers to click the twitter icon and go to my twitter account, pinterest icon and go to my pinterest account, etc. So, my next step is to go to image-maps.com and get started.
It’s pretty simple, and it’s free. No signing in or anything.
The first step is to upload the picture.
Just click the chose file box and upload your picture.
Click the “start mapping your image button”
Deselect the base URL box and the Show Text Link box
Select the “rectangle” box
Adjust the rectangle so that it fits where you want it. Add the destination link in the text box below. Click save.
Repeat this step until all of your links have been added.
Click “Get The Code”
Don’t worry about signing in. Just click the tab that says “HTML CODE” and copy and paste your code.
Now you have your map!
Install it on your website wherever you want it by copy and pasting it. Check it out and make sure all the links work.
There is still one more thing you need to do. The image-mapping website doesn’t save your pictures for more than a couple days so you need to host it on another site. I use photobucket. Simply upload your photo to your photobucket account and copy the direct link. Go to back to your code and find where it says src=”http://www.image-maps.com/uploaded_files/xxxx”. Deleted from the http to the end of the link and paste your photobucket code in. If you don’t do this, your image will be deleted and it won’t work.
I hope this helped you! Let me know where you use it so I can come check out your handy work!
Share
){kind=link}
This was very helpful! Thanks for sharing 🙂
Nice "How To" on Image Mapping I will definitely being trying this out. Thanks.
I'm here from the Mommy Mingle Blog Hop 2, and I'm Following you on Bloglovin! 🙂
Thanks for the follow and thanks for stopping by! I headed over to check out your blog now.
You are brilliant! Thanks so much for this helpful tutorial! Pinning! I popped over from Tatertots and Jello–thanks for sharing!
~Abby =)
I'm so glad you liked it! I was super excited when I figured this out.
I've been trying to use image-maps for a week or so now and I was able to use it in my sidebar but I'm having issues using it in post. The text links at the bottom of my collage work just fine, but the image itself isn't working. It doesn't appear to be working in this post for you either with the social media icons. But they work on your sidebar. Any thoughts?
I actually didn't put the map in my post, just the image. The only thing I can think of is did you unclick the base URL box? Also, when you're mapping the image, make sure you put http://www. in front of the website and click "test link" If it doesn't work there, it won't work in your map either.
I need to sit down and read this when I can really concentrate! Found you on the Night Owl Venting Blog Hop. New follower!!
Hmmmm…I guess my comment didn't go thru. What I was saying is this is really helpful info and I need to sit down and re-read when I have time to really concentrate! I pinned it and I am following you now. Visiting from the Night Owl Venting blog hop.
Love this! Learning to image map was the best thing when I was designing my blog. Everyone needs to know this! I would LOVE for you to share this over at my link party, Ginger Jamboree! I also have a great giveaway going on that you should enter!
On my way there right now! Thanks for stopping by.
Fantastic tips!!
Thanks for sharing this at our "Best Of The Weekend party"! I have pinned your project to our party board and another one of my boards too. We hope to see you again when the party kicks off Friday eve at 8PM EST.
Have a great week!
xoxo
Thank you! Just what I needed!
OMG, I always wondered how to do this!!!! Awesome post; I am pinning right now and printing out :o) Thanks so much for sharing!
– [email protected] http://www.croppedstories.blogspot.com
I\’m glad that it was so helpful to you! It\’s a super nice thing to know how to do, huh! Thanks for stopping by.
Thank You SO MUCH for this! <3
I've used your tutorial and the site you recommended to make my own multi-functioning header 🙂
XO,
CorinnaAshley.com
It is in reality a nice and useful piece of info. I’m satisfied that you just shared this helpful info with us.
Please stay us up to date like this. Thanks for sharing.
Good day I am so glad I found your site, I really found you by mistake, while I was browsing on Digg for something
else, Nonetheless I am here now and would just like to say kudos for
a marvelous post and a all round entertaining blog (I also love the theme/design),
I don’t have time to look over it all at the moment but I have book-marked
it and also included your RSS feeds, so when I have time I will be
back to read a great deal more, Please do keep up the great job.
You’re so cool! I don’t suppose I’ve read anything like that before.
So great to find another person with some original thoughts on this topic.
Really.. many thanks for starting this up. This site is something that’s needed on the web, someone with
a little originality!
Yesterday, while I was at work, my cousin stole my iPad and tested
to see if it can survive a forty foot drop, just so she can be a youtube sensation.
My iPad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!
Hello there, I discovered your blog by the use of Google while searching for a related
matter, your web site got here up, it seems great. I’ve bookmarked
it in my google bookmarks.
Hello there, just become alert to your weblog thru Google,
and found that it’s really informative. I am going to be careful for brussels.
I will be grateful if you continue this in future. Numerous other folks can be benefited out of your writing.
Cheers!
Howdy! I understand this is somewhat off-topic but I needed to ask.
Does managing a well-established website such as yours require a massive amount work?
I am brand new to blogging however I do write
in my journal everyday. I’d like to start a blog so I can easily share my own experience and
thoughts online. Please let me know if you have any recommendations or tips for brand new aspiring blog owners.
Appreciate it!
Hey! It doesn't require a TON of time now, but getting it all set up in the beginning was hard work. I recommend starting with blogger and seeing how you like it from there! Thanks for stopping by!
Usually I don’t read post on blogs, however I wish to say that this write-up very
compelled me to check out and do so! Your writing taste has
been amazed me. Thanks, quite great article.
It’s awesome to go to see this web page and reading the views of all colleagues regarding this paragraph,
while I am also eager of getting know-how.
My spouse and I stumbled over here different web address
and thought I may as well check things out. I like what I see so now i’m following you.
Look forward to exploring your web page repeatedly.
Great post however I was wanting to know if you could write a
litte more on this subject? I’d be very thankful if you could elaborate a little bit more.
Many thanks!