When I first started blogging I didn’t know a whole heck of a lot about coding, html or web design at all. I have basically taught myself everything I need to know to do what I want to do. That being said, I might not know the “right” way to do everything, but I know that what I do works. I also don’t know ANYTHING about blogger so my tutorial is based solely on using WordPress, I imagine it can’t be too different on blogger, but try at your own risk!
So what on earth is an image map and why would you want to know how to create one? An image map is a picture that when you click on different areas of it takes you to different places. I use image maps a couple of places on my blog, in my header and on my sidebar. I use the one in my header so that I can combine my header image and nav bar into one, which leaves more room for my content and less room for weird html goof ups! I recently created one for my sidebar to showcase all the different categories of posts I write. This replaces the generic WordPress generated one. I did this because I wanted to A) make it pretty and B) give you, the reader a clear picture of what I have to offer!
Before you get started with the mapping, you will need to have an image to work with. I created my sidebar categories image using PhotoShop, but you can just as easily use Picmonkey or any other photo editing software. Once you have your image ready you will want to upload it into the image map creator. I know that there are lots of options out there for creating image maps, but I LOVE this one! It is pretty easy and I have never had any problems using it.
Once you have your image uploaded you are going to be faced with a lot of choices! There are a few key things you want to make sure you do. The first thing you will need to do is choose your shape. In this example I used rectangles. Click on the “Draw Rectangle” box and then draw your shape on your image making sure to include all the area you want to be clickable.
Next you need to decide where you want your shape to go when you click on it. Since mine is going to lead to different areas of my site I typed in the URL of the page I wanted it to go to. You will also need to add alt text (what shows when you hover over it) before you can move on.
Now comes decision making time. Do you want the link to open in a new tab when it is clicked? If so you will want the drop down menu to show _blank; if you want the link to stay on the same tab and just open the new page you will choose _self. Click save and you are ready to go. You will need to repeat the process for each area you want to map on your image.
So you’ve gone through and mapped out your whole image, now what? You will go back up and click on the box that says “Create HTML Map”. When you do this you will see a box down below that looks like the image below. You want to copy everything after the “START COPY” until the “END COPY”.
Then you are going to go to your WordPress Dashboard and open your widgets. They are located on the left hand navigation as a sub-menu of Appearance. Once there you want to look for the one that says “Text” and drag it over to whichever area on your sidebar you want your image to appear. Paste all the code from the website into the box. You will then want to open a new window and upload your image into your media library. Ideally you do this first, but since I am such a slacker, I always forget and do it at this point in a new tab. Once it is uploaded into your library you will want to open it to edit. Highlight the file URL and paste it in your HTML code where it says <img src= Make sure you keep the URL inside the quotation marks!! Hit save again and you are all done!
Congratulations! You just mapped your first image, the sky is the limit! Let me know if you use this tutorial to create your own image map or if you have any questions. This is my first tutorial like this and I want to make sure it is clear!
Linda@MixedKreations says
I’ve been restructuring my blog and have been wanting to do something like this in my sidebar instead of the normal drop down menu. I’m not real techie, everything I’ve done, I’ve done myself with googles help (-: Thanks so much for your tutorial, maybe I can manage this, still looks complicated but I will try. Pinning!
Sarah @ My Joy-Filled Life says
Thank you for this tutorial. I’ve been wanting to try doing this for awhile now and I finally did it with the help of your post. Very easy to do and thanks for explaining it well.
Ashley Emmett says
Yeah!!! I’m so glad it helped you!! It seemed so scary and hard until I did it! 🙂