Twitter Facebook Email Subscribe

How to make Multiple Clickable Images in your WordPress or other Blog.
Creating Image Maps.

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.

 

click map

freezer storage Hostess Gift Butter Rhubarb Crisp Alfalfa Sprouts Vintage mason jars Jar Storage Cookie Jar Thanks

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?

Knock, knock.
(you’re supposed to say Who’s There)
Karen!
(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?

 

click map

Ikea Knappa Lamp Antlers Wood Bowl Cowskin Rug Cowhide rug2 Aalto vase

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

 

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.  

 

Antlers Wood Bowl

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.

Cowskin Rug Cowhide rug2

Aalto vase

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 http://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.


Related Posts Plugin for WordPress, Blogger...
52 Comments | Filed Under: Everything Else |

52 Responses to How to make Multiple Clickable Images in your WordPress or other Blog.
Creating Image Maps.

  1. Thank you so much for the tutorial and it’s a beautiful style you have. Have a lovely Day.

  2. Amanda says:

    See this is why I love your blog above others… Your crafty, down to earth, funny, and a techie!!! This will help me out as soon as my partner and I get all of our crap together to start our blog. THANK YOU!!!!! Your awesome!!!!

  3. Amanda says:

    Oh and did you see I got the picture in the comments to work… Thank you for that as well!! Look –> It’s me!!! Yay!!! Thank you Karen!!!

  4. Sue says:

    Wow, I didn’t even know one could do such fancy stuff and here you give a full blown tutorial! Thanks for all the work you put in it.
    Wishing you a sweet day from out East,
    Sue

  5. Avad Fan says:

    Thanks so much for sharing this concept and tutorial. I feel smarter already:)

  6. Denise says:

    Fascinating. I don’t have a blog but find it interesting nonetheless. It’s amazing to consider all the ‘things’ that work for us EVERY SINGLE DAY that we have no clue as to WHY…

  7. Thanks for this wonderful information. I’ll have to play with it.

  8. nicole d says:

    not gunna lie… i totally just “swept” my curser along every square inch of that photo looking for a secret clickable link… under the chair, a random book on the shelf… that random frame leaning against the book shelf… haha. i’m such a nerd.

  9. Dear Karen, Wayne and Selina

    You better cross your fingers and toes and everything else in between- and pray that we never ever never meet. P.s Everyone Wayne and Selina are from Waylay Design and they did my site too. Best web company in the whole wide world. Ok…back to our meeting. If I ever meet any of you, I am going to KISS each and every one of YOU. Right on the lips. Yup. Gross. But I will. Thanks so much for your AWESOMENESS !!

    Loves-Ya-All !!

    Should I be signing this anonymously ? LOL. aka. blog hot tips stalker

    • Wayne says:

      LOL. Thanks to both you and Karen for always plugging us, we really really appreciate it. I think if we had a “biggest fan” contest it would be a tough call ;)

      - Wayne and Selina
      WayLay Design

  10. AmieM says:

    Very helpful! It’s good to know that’s why WordPress mucks up my code all the time.

  11. Agnes says:

    AWESOME tutorial! I think I will have to do this on my site one day..

  12. jane says:

    OMG shoot me in the face! I really enjoyed the knock knock joke. See you tomorrow.

  13. Julie says:

    <3 thanks so much for this!

  14. Sarah A. says:

    This is great! I have previously tried the Photoshop route, only to almost throw my laptop out the window because it was so frustrating. As always, you are hilarious and helpful!

  15. I’m going to try that knock-knock joke, but I think nobody’s going to get it when I say I’m Karen Bertelsen.

  16. Sherri says:

    You did a great job of explaining this process, Karen! I even understood what to do even though I’m not the most technically savvy person so that’s my evidence that you did well. Thanks for enlightening me!

  17. Lisa says:

    Great tutorial – something I always wondered how to do!

  18. Clare says:

    Brilliant, BRILLIANT, B.R.I.L.L.I.A.N.T! Thank you thank you thank you!!!
    And thank you!!!!

  19. Shauna says:

    Awesome, I love learning new things. Thanks

  20. Thanks so much for a GREAT tutorial. This is SO much easier than Photoshop! Love your site, style, & humour.

  21. Karol says:

    Orange you glad I didn’t say banana.

  22. Christina says:

    Two days ago I thought to myself, “I need to figure out how to make an image map in WordPress.” Not joking. Years ago when I taught myself HTML I figured out how to do it but it has completely escaped me. This is perfect timing! Thank you!

    • Karen says:

      Well that’s kindda perfect isn’t it? It’s funny … people are either so excited they could jump out of their skin for this post or … they aren’t looking at it all, LOL. ~ karen

  23. JebberA says:

    For those of us who don’t have a blog of our own, this post kinda sux.

    I like your blog enough to give you a “by” on this one … just this once.

  24. kelli says:

    HTML and click here and point over here and scroll and url and MobileFish and Image Map Creator and 583%#$@#$90fdel;;kjm54298&((*%%#SKLA8*(&*$#!@u&y*(y*&uyi&u&*ZZZZzzzzzzzzzzzzzz….

    and that is why I stopped blogging on my blogs a couple years ago.

    Don’t get me wrong, i LOVE me some interwebs…but i don’t like learning the stuff that makes them ‘go’…it’s kinda like math to me…i can’t even balance a checkbook,

  25. Deborah says:

    So my dear Karen…just how did you come across this site? Curious George wants to know! ;) thanks so much, definitely going to be trying it out! :)

  26. Alissa S says:

    As always, thanks Karen. We have a website but we’re using iWeb through MobileME which is about to be dissolved because of Apple moving over to Cloud… sooo, we’re looking for something new. I’m sure you did your homework when creating this blog. Which program are you using? Any recommendations would be greatly appreciated!

    • Karen says:

      Hi Alissa – I have a self hosted (pay for a server) WordPress blog. I’m quite happy with WordPress. If you’re looking for a server I wouldn’t recommend GoDaddy. Especially not with a WordPress blog. They’re cheap, but they’re also kind of useless. I use ServInt for my blog, but unless you have a fair number of readers it might not be worth the cost for you. They have fantastic customer service though! ~ karen

  27. Thanks for your great blog. One question…do you have any idea what the definition of “buggering” is? I’m sure it’s not what you intended for this post. (If you don’t know, Google it and know that I’m ROFLMAO!)

    - Gitana the Creative Diva

    • Karen says:

      Heh. There are a variety of meanings and yes .. I do know what the one you’re referring to is. :) ~ karen

  28. Jane says:

    That is just what I wanted and I did not know I wanted it. I will be mapping all over the place.
    Thanks!

  29. David says:

    Karen – brilliant share – thank you so much for this.

    Regards the WordPress html/visual editor part mucking things up, there can be a solution to this – as follows:

    If you put the code in a text widget it doesn’t get affected of course.
    That ok if you want the multi-clickable image in say the sidebar.

    But some themes allow you to create custom widget areas that you can drop anywhere on the site you like as a [shortcode]. So create a custom widget area, drop a text widget with the html code in it and then add the [shortcode] wherever you want in the content. When you swap html to visual it wont matter….

    Some folks might find that useful – although it might mean getting to grips with a different theme of course!

  30. Kesha Brown says:

    Thank you! I had been looking all over for a tutorial that WORKS! :-)

    And you’re right about plugins…better to just code things in rather than using plugins for everything, especially if it’s simple…

    • Karen says:

      Your’e welcome Kesha – It’s still glitchy with WordPress though. The best bet is to work on the html side and NEVER go over to the visual. The second you do … BOOM … the code is screwed up and you have to start again. Or at the very least revert to one of your previous saved versions of the post. :) ~ karen

  31. I can’t tell you how thankful I am for this tutorial. If I told you how long I’d been trying to figure this out, you’d want to send me on an all expense paid vacation. But now you don’t have to because lo and behold, you gave me the answer I’ve been looking for. Was having trouble creating image map for my illustrator file, and mobile fish solved the problem and you also gave me an inkling as to what I was doing wrong. I was able to upload my new ‘clickable’ sidebar blog follow image with all regions intact and clickable. thanks SO much. will now be following by email and will put a link to your blog on my blog as well.

    btw, NICE fish!!! AWESOME abs.

    • Karen says:

      LOL. Thanks Pamela. Just remember if you switch between html and visual your platform may fumble with the MobileFish code and your links won’t work. Glad it worked and thanks for coming back to let me know. ~ karen!

  32. Bruce says:

    Hey — great post, but one thing that I came across that might be helpful to other readers:
    I used MobileFish.com as you outlined. But, since my theme is responsive, MobileFish wouldn’t work, since the page coordinates will change depending on the user. I found a solution that will allow Mobilefish (and I assume any image mapper) to work for responsive pages: the Responsive Image Maps plugin. All you need to do is install that plugin, and it works — the image map is fully responsive.

  33. Michele says:

    Great tutorial! I was wondering is there a way for a popup to show instead of a url? I am trying to do something like this; http://www.irem.org/html/Education/MOLDDetectionPreventionAndRemediation/story.html

  34. jennifer says:

    Thanks for this. I felt so good when it actually worked.

  35. bynw anlarye says:

    I make the image map and copy the required code just fine. But when I put the image map actually in wordpress the coordinates shift slightly.

    • Karen says:

      Hi Bynw – It’s hard for me to say what’s going on without seeing it but as long as you stay in the “text” side and never, ever switch over to the “image” once you’ve pasted in the text you should be fine. Also the odd time when you’re highlighting your coordinates, the box can shift. You have to pay attention or it can highlight huge areas or tiny portions without you realizing it. ~ karen!

  36. bynw anlarye says:

    Thanks Karen,

    I am well aware of the issues that WP has when switching between HTML and Visual editing. Learned that the hard way a long while back. I make the image map on Mobile Fish. Copy only the code needed for WP and it doesn’t line up right. Now if I take all of Mobile Fish’s code for a full HTML page and just upload it and the image someplace. The boxes are in the right positions. I don’t want to disclose the link in a public form because its a development site. But I can privately.

  37. bynw anlarye says:

    I’ve discovered the issue. It’s the theme.

  38. Tara says:

    I am trying to create an image map that links to a lower part of the same page. Do you have any suggestions on how to do this? Any help would be appreciated.
    Thanks!

    • Karen says:

      Hi Tara. I think what you might be trying to do is a “page jump”. That’s like where a post says something like “click here to read the full tutorial”. And when someone clicks there it scans them past a bunch of mumbo jumbo on the page like photos or whatever and takes them right to the tutorial. It isn’t done the same way as an image map and in fact is much easier. I’d paste the html code in here, but i’m not sure if it might get screwed up so … look at this site for instructions. I’m not sure what it would take to insert it into the code for the image map. I’ve never tried it so I’m not sure if it would work or not (if that’s what you’re actually looking to do) Good luck ~ karen

  39. mike says:

    Hi Karen, thank you so much for this image mapping information. It saved the (work) day and my job! :) Do you have any info or solutions for the issue of the completed image map (created by following the above info and attached video) not “sticking” to the image when viewed on a mobile device? The completed image map works perfectly when the site is viewed on desktop but when it goes mobile the map dimensions seem to remain their size despite the image shrinking for the smaller screen. Needless to say but text is free so I’ll say it, the image map thus does not work properly on mobile.
    Mike

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>