We are celebrating our two year blogiversary! Can you believe it? Two years! This week we are looking back as some of our favorite and most popular projects. Today, I am sharing one of our most popular with you. Boxes into Baskets.
You can visit the boxes into baskets original post to see how we made them.
Don’t forget to enter The Home Depot Challenge Giveaway for your chance to win a $100 gift card to The Home Depot. Check back each day this week to celebrate with us and see more awesome Elizabeth Joan Designs’ projects!
We have been asked quite a few of times how to create a clickable image with multiple links. OK. Maybe not in those exact words. But it is something that many people are interested in knowing how to do.
A clickable image with multiple links can have a ton of uses on a blog or website. It’s a great way to group like items together, such as social media icons and images from popular posts, which could also boost traffic. BONUS! It is also wonderful for blog hops (Hello fellow bloggers!), where you want to include images and links to other blogs in a post, and it is perfect for a round up of affiliate products or project/product gallery. Let’s get to the details of how to do it.
To start, you will need an image with various parts that you would like to link to. I made a collage (check out this post on how to make your own photo collage) of some of our favorite chalkboard projects and then uploaded the image to our blog and inserted it into a post. In addition to your website, you can also use an image hosting website (i.e. Flickr, Photobucket, etc.) You will want to view the HTML code for the image. Copy the URL from the image source (that’s the part just to the right of img src and inside of the quotation marks that starts with http.)
Next, go to the Image-Maps website, paste the URL in the white box, and click “Start Mapping”. When the new page is loaded, press “click to continue.”
Then, it is time to start mapping. Right click on the image to bring up the menu. (For Mac users “Control + Click.”) Choose “Create a Rectangle/Poly/Circle” depending on what shape the is you are trying to map. I chose rectangle and resized it around my first square in the upper left corner. A little box will pop up and this is where you will enter the URL that you would like to direct the part of the image to. For example, I added the link to our Dry Erase Board Turned Chalkboard, since that is the part that my square is around. This is where you can also add in a title and alt tags if you so desire. Continue this process for each of the areas you would like to link to.
Once everything is mapped, right click again and select Options. Change the Base URL (to your website) and Image Map Name. We also change the options in the settings tab by un-marking all of the boxes. Once you are done changing everything, close the box and right click again. By this point, you may have an aversion to right clicking, but lucky for you, this is almost the end!
Select “Get Code” and choose the HTML code tab at the top of the pop-up. Scroll down and copy the entire HTML Image Map Code. Then, all that is left is to paste this code into your blog post, sidebar, etc.
Phew! That was a lot, but totally worth it. See, I was able to create this fun collage with links to each project!
And here are our social media icons, in which we used the same process.
There are really so many uses for clickable images with multiple links! In addition to just creating the linked image, you may also want to consider adding code to make the links open in a new window (adding target=”_blank” to the end of the anchor tag) and including rel=”nofollow” for affiliate links. So, what are you going to use your clickable image with multiple links for?
You may also like:
One thing that has been very beneficial when blogging is to know how to create a photo collage graphic. We’ve used photo collages for all kinds of posts to share a collection of like items or to save a little space when there are a lot of pictures in a post. If you haven’t already figured out how to make a photo collage, we are sharing a very simple (and free!) way to make one that will hopefully help you out.
I’ve been working with several different photo editing software programs for years, so I’ve learned a lot of the ins and outs on my own. Graphic design is sort of a hobby of mine. (Have you checked out our FREE printables?) Emily, on the other hand, is a bit more inexperienced and since she is still working on some blog skills in the midst of her already very busy life, buying and learning how to use a new software program has been low on the list. Luckily, we’ve found Pic Monkey and it has made putting together a photo collage a lot easier.
Here’s how to make your own and it’s super easy:
1. Go to Pic Monkey’s website and click on the collage icon.
2. Select the images you want to use in your collage from the appropriate folder on your computer. (For PC use the CTRL key/MAC use the CMD key to select multiple photos at the same time.)
3. Click the “OPEN” button.
4. Select the “LAYOUT” icon on the left of the screen and choose the ideal option for the collage you want to make. I love to use “square deal”, but you can pick between so many different choices.
5. Select the “PHOTO” icon on the left of the screen to view the photos you have uploaded.
6. Drag each photo over to the collage area and place it in the preferred space. You can move the image around, resize, and/or edit it a bit once it is in place.
7. Once all the collage is filled to your liking, choose the “SAVE” button at the top of the screen.
8. Before saving your collage, you can tweak the name of the file and change the quality/dimensions. For a blog graphic, we typically choose the middle quality and smaller dimensions (this also saves us some space on our computers), but if you eventually wanted to print out the collage, opting for higher quality and larger dimensions would make the end product look more clear.
9. Save the photo collage to your computer, making sure to note the folder you save it in so you can access it easily later on.
Now, that wasn’t too hard, was it? If you liked this tutorial and are interested in learning how to add multiple links to your collage for use on your blog or website, check out our post How To Create a Clickable Image With Multiple Links.
You may also like:
Since part of our blogging adventure includes showing fun photos of our projects and homes, we wanted to share some of our favorite photography and editing tools. The following list includes our favorite camera and software, as well as some extra supplies that we love.
This post contains affiliate links.
No. 1 – If you are going to be taking pictures, you definitely need a good camera and we don’t discriminate between brands. Emily uses Nikon and I’m a Canon girl. We love the Canon EOS Rebel T5i as an entry level DSLR camera.
No. 2 – You can buy a new DSLR camera that comes with a kit lens, which is all fine and dandy. But if you want to up the game a little, adding a 50mm lens to your camera bag, will definitely have you seeing things more clearly. We love these lenses!
Canon EF 50mm f/1.8 II Camera Lens Nikon 50mm f/1.8 Camera Lens
No. 3 – We realize that getting supplies for all of your photography needs (and wants) can be pretty expensive, which is why we love the Neewer TT560 Flash Speedlite. The price is right and this little gadget is great for brightening a dimly lit indoor space.
No. 4 – Got a shaky hand? Then the Joby GP3 GorillaPod is the perfect way stabilize your camera. Plus, it is small and lightweight which makes it easily portable!
No. 5 – Shoot Fly Shoot is a great website that helps teach photography and Photoshop tips and techniques through online training videos. The format is very laid-back, letting you learn at your own pace. (Emily is already taking two of the classes!)
No. 6 – For Christmas, I received the Datacolor Spyder4Pro Display Calibration as a gift and it has made such an amazing difference in the color of my photos. It corrects the colors of your computer screen so that when you are editing photos, you are seeing the things the way they should be. (I’m kicking myself for not getting this sooner!)
No. 7 – There are a lot of software programs for photo editing, but we absolutely love Photoshop! You can splurge on the full version or grab Adobe Photoshop Elements 13 if you are trying to keep to a budget.
No. 8 – If spending money on photo editing programs isn’t in the cards for you right now, we think PicMonkey is a great online alternative. They do offer a Royale version with a few more bells and whistles, but you can still do quite a bit with the basic one.
(In case you missed it, couple of weeks ago, we shared some of our Favorite Painting Tools & Supplies that we both love to use for DIY projects.)
You may also like: