Last week I featured a couple of posts that included image maps. Image maps are pictures that when you hover over them with your mouse, allow you to click and bring you to a certain link.
One of them for example, was a photo with all of my mason jar posts. Depending on which portion of the picture you clicked on, it would take you to a different mason jar post.
Hold everything! This is off to a really dry and boring start, isn’t it? How ’bout we kick things up a notch with a knock knock joke?
(you’re supposed to say Who’s There)
(now you ask Karen Who?)
Me! Karen! Karen Bertelsen! It’s me! What are you drunk or something?
Feel free to tell that one at your next party.
O.K. onto the informative but boring stuff.
How to create clickable links with an image map.
WordPress allows you to do this but it’s clumsy and you don’t really have control over the picture the way you would like to. For one thing, the biggest issue is the fact that you can only provide one link to each image.
So what if you have an image like my above “mason jar” picture, or this following picture of my front hall, where you want to be able to click on all different parts of it?
Well … as it was so eloquently put to me years ago by a mechanic regarding my dying car … “You’re shit outta luck, lady“. The “lady” at the end made me feel fancy.
If you noticed, with the above, single, picture I’ve created several areas you can click on to take you to different links to buy the things in my living room. Hover your mouse over the lamp and it brings you to the Ikea page where you can buy it. Ditto for the antlers, the wood bowl, the rug and a couple of other things.
So what to do since WordPress isn’t going to help you out with this one? You roll up your sleeves and create an image map. This can be done through Photoshop, but it’s hard. It’s complicated. It’s complicated and hard. And it might make demons explode out of your forehead. OR, you can create a picture in Photoshop, or whatever picture program you use and then head on over to here …
MobileFish is one of many FREE Image Map creating websites. If you Google “Image Map Creator” you’ll find several. But this one usually works for me so that’s the one I’m going to recommend you use.
The reason I say usually is because sometimes, out of nowhere, it doesn’t work. It has to do with WordPress trying to hijack your code. BUT, at the end of this tutorial I have a video from Wayne & Selina from WayLay who explain not only how to make an Image Map, but also how to guarantee it works without WordPress buggering it up.
1. Once you get to the MobileFish website you’ll need to upload the picture you want to create an image map of. You do this the same as you would upload a photo to anything.
2. Once you’re photo is uploaded, click on the box that says Draw Rectangle, Draw Circle or Draw Polygon. I find Rectangle is the easiest and only one I use.
3. Now that you’ve selected “Draw Rectangle”, use your mouse to shape out a square/rectangular box around the part of the picture you want to link to.
4. Now scroll down below the photo and fill in the URL where you’d like the “click” to go to and the text you’d like to appear when you hover your mouse over the picture. You don’t need to worry about any of the other fields. Just type in the link address and name it.
5. Finally, click “Save Region”, which is just below the boxes you put your URL and text into.
Do this for all of the areas on your picture you want a “clickable link”. You can create as many as you want.
6. Once you’ve created all the links you want to click on “Create HTML” image map.
7. Copy and Paste the code you’re given into your WordPress or other blog under the HTML section. Do NOT under any circumstances start working under the “Visual” tab again. WordPress has a glitch where if you switch from HTML to Visual it starts to change your code. It thinks it’s “fixing” your code, but really it’s wrecking it and being bossy. So remember, when you start working in your actual WordPress post do NOT go over to the Visual tab ’cause it will screw up the Mobilefish code you put in and it won’t work.
There is a way to fix the code by simply taking out any spaces in it, which Wayne describes in the video at the end of the post.
8. So now that the code is in the HTML section of your post, it will look like this … There is only ONE thing you have to change in the code. Mobilefish allows you to use their “server” basically to upload your picture. But once you put it in your website you need to give your picture it’s own home on your own server. To do this you need to upload your picture to your server using something like Filezilla or your regular old WordPress Images. If you don’t know how to do either one of those things, Well … you’re shit outta luck. Hah! I’m not going to explain how to upload a picture using Filezilla, which is a bit complicated. Yes, even more complicated than this complicated tutorial can handle.
However, to upload your picture to your WordPress blog, just do it the way you normally would. Go into your “visual” tab and upload the picture you used for your image map. (better instructions on this in Wayne’s video at the end of the post)
9. Once you’ve uploaded your picture to your server, copy the address of it (in my case it’s https://www.theartofdoingstuff.com/images/imagemap/Imagemap-bookshelf.jpg) because I uploaded my picture to my server. If you just inserted your picture into your WordPress blog directly, just copy the image portion of it from the HTML section of your post. Again … instructions for this are in the video. Then, delete the MobileFish portion of the image in your Image Map Code and replace it with your image source. You literally just delete their characters that come in between the quotation marks … and insert your own address.
Now click preview and check to make sure it works.
Now that you’ve read this tutorial and are thoroughly confused, take a look at the video Wayne made. With the combination of my tutorial and Wayne’s video I’m confident you’ll be able to make your own Image Map.
p.s. There may in fact be a plugin for this sort of thing, I’m not sure. But the truth is, the less plugins you have on your site the better. They slow things down and create a bit of a “mess” in your site. If you can learn to do things yourself … it’s best you do.