this post is going to be sorta old news.
But, I've been getting lots of questions that can all be answered with a single tutorial on how to use image-maps.com
. So if this is repeat info for you, just smile and nod and give it a pin for me anyway, won't you? Thanks. You're a peach.
Image-maps.com is a free site that maps out the coordinates of YOUR image so that you can easily link up multiple URLs to that one image.
So what's the big deal? Why do you want to be able to do that?
I'll tell you why: because it looks cool.
Ok, ok that's not the only reason. Functionality does play into this a little.
Alright– a lot. But here, why don't I show you:
Have you ever wanted a header for your blog that looks like this…
Ever drooled over nice and neat, cute social media icons like these…
Or had blog envy over a cute “About” box, like this one…
Well, I'm here to tell you: you don't have to just dream about these types of features on your blog–
you can do it yourself!
Yes, yes… our blogging friends I've just mentioned above appear to have all had some help from exceptional designers. They have beautiful graphics. They have custom fonts. Yes. That's all true.
(You can have all that too, if you just know where to look– but that's a post for another day.)
But the point is: look at those blog designs closely. What do you see?
It's all just basic images and text! So what makes it special?
The location of the links!! It's all about the flexibility to put social icons in the header, or to streamline “about,” “buttons,” and “sponsor” all in to one gadget.
Anyone can use Picmonkey to make a pretty picture.
But you need to know how to link it all up for it to actually be functional on your blog.
And that's what image-maps does for you.
So just to prove my point, and to provide a step-by-step photo tutorial for you, I'm going to re-create [a lazy version of] Jen's fabulous “about” box up there by using Picmonkey.com and Image-maps.com.
(there are a couple of limitations, but I'll address them as they come…)
I won't be covering Picmonkey basics in this tutorial. If you want to learn how to start an image from “scratch” or to learn about some of their cool features, check out my other design posts
. I also won't be addressing where to find social media icon graphics. See this post
1. Creating the image in Picmonkey.com goes like this…
2. Save to your desktop as a .png file.
3. Upload to a blog post or to picasa, photobucket, etc… in order to create and obtain an image URL
5. Click on Rectangle. Use the rectangle that appears to highlight the first area that you'd like to link. For example, I'm going to start with “About.” I'll highlight “About” and link it to my about page (ie, https://www.somethingswanky.com/about).
6. Continue to highlight and link each section that you want linked.
7. Make sure to uncheck the “Show text links” box.
8. Click “Get Code.”
9. Click on the HTML tab and copy your code. Paste it into the gadget box of your choice (sidebar, header, etc…)
I mentioned there are certain limitations when you design using this method–
I'm simply referring to the fact that you aren't able to write an HTML code for different features like drop down menus, or switching from tab to tab. This method only allows you to link to ONE flat image. Which is why the example I just did wouldn't really be optimal for a blogger blog– unlike Jen's, we can't highlight different tabs.
We can only click on the text to be taken to the corresponding link.
But even taking that limitation into consideration, it's still pretty cool to have way more design possibilities open up with image-maps.com
Go design and have fun!
Please visit my Party Page
for a more complete index of Link Parties.