26 May 2014
How To Rock Your Blog With Image Maps
Since I wrote my post on Blog Design Tips. I have gotten a lot of questions about how to use Image Maps. Image maps are an amazing tool for your blog which helps you create a seamless look, and can link many different url's to one image. Bottom line... if you are designing your own blog and you aren't using image maps... you are missing out!
Image Maps have changed their interface since I first started using it, and I will admit, it certainly isn't exactly user friendly. There are a few tutorials out there on the old image maps but I haven't been able to find anything using the new site. So I thought I would pass on what I have gleaned through my own trial and error and hopefully it will save you all a whole lot of time!
I've included a lot of screen captures for all of the visual learners out there like me! So hopefully its easy peasy!
Once you've made the image you want to be mapped, you'll need to upload it to an online host. Something like 'photobucket' works great for this and is always what I use. Once you get your image into photobucket you can resize or edit it how you like. When you have made all of your changes and save them you'll see the image with 'Links to Share This Photo' on the right hand side, you'll see this below. Click 'Direct' which will copy the direct link to the image as hosted with photobucket.
Go to the image maps site. The first page that comes up is what you will see below. You'll see a box that you can paste the url you just copied from photobucket (Tip: if you skip the previous step you'll have to create an account with image maps which you don't want to do, if its not hosted by anyone than image maps will delete the photo after an hour... not good)
Paste the url into the box and click 'Start Mapping' - When the next page pops up just click 'click to continue' instead of making an account.
The next page you'll see is your image. Right click on the image and then select 'Create Rect'.
Next you'll see something like a text box pop up, you can expand this like a text box as well. Put the box around the area you want to have linked. In the box below erase the default 'Map URL' and change it to the url that you want to have the part of the image linked to.
You'll see in my example below that I'm creating an image that will link to popular posts or categories. I want the words 'cloth diapers' to link to my post on "Cloth Diapers for Dummies". I found the link to the post and then copied and pasted it into the 'Map URL' box.
You will then click over to the 'Settings' tab. Change all categories to what I have below. Overflow doesn't matter, it can be either visible or hidden. change background color to #ffffff which will make the rectangle on your map transparant. Then change opacity to 0 and just erase border and font color. Click save.
Right click again and select 'Get Code' from the menu that pops up. You'll see the tabs that say 'Map Info', 'HTML Code', and 'HTML Output'. Click on the 'HTML Code' tab.
Scroll down to where you see the complete code. It will look something like below. Highlight and copy.
Now that you have your code you'll want to put it into your blog. The easiest way to do this with Blogger is to go to your layout, and 'Add a gadget'. You'll then select 'HTML Code' from the list of gadgets. Paste the code for your image maps into the box that pops up, save and then move it to where you would like it on your blog.
Voila! Your image should now be showing on your blog with working links to where you have directed them to go. For an example of this you can check out my blog header, each category goes to a different URL and the large header image goes to the homepage.
I hope this has been a helpful tutorial for you. If you have any questions I am happy to at least try to answer them below. Be sure to check out my other blog design tips here.