WordPress Wednesday – Responsive Image Maps

by Tony Gamble

map-image-mappedImage mapping. It’s been around for a long time, since the early days of the World Wide Web. What is it? It’s the ability to map out multiple clickable hotspots on a single image. Usually when you want to add a link to an image, you wrap it in what’s called an anchor tag, which in it’s raw HTML form starts out as <a href=“http://thelink”> and ends with </a>. But say, for example, you have an image of a map of your local eateries and you want to have each location on the map link to its respective restaurant’s website. With the HTML map tag, you can define a shape area on the image and link only that area to the Web address. It sounds terrifyingly complicated, but there are some brilliantly simple online tools out there, like Easy ImageMap Generator, that make it easy to set up your image map by writing out the HTML code for you.

So what does all this have to do with WordPress? Well, more often users are now choosing templates which are responsive in design. This means that the display of the site will shift and resize according to the visitor’s browser size, an imperative feature for mobile visitors. It also means that images being displayed will also resize to make the best use of the visitor’s device. If an image has been mapped with multiple clickable hotspots, the coordinates which define each shape area will no longer make sense. Let’s say you had set up a rectangular area on an image with a size of 800 x 600 pixels, with coordinates that are something like “0,0,300,200”, creating a small rectangular hotspot in the top left corner of the image. If a visitor is looking at that image on their phone, it could have been automatically resized to 320 x 240 pixels on a small screen. Now that rectangular hotspot covers almost the entire image!

Enter the Responsive Image Maps plugin. This lightweight beauty adds a popular jQuery plugin called RWD Image Maps that will automatically recalculate all of those coordinates based on the new image size. There are no settings to configure. You just install and activate the plugin, and it will handle the rest. And best of all, it’s free!

Do you have a favourite plugin that has saved your bacon? We’d love to hear about it. Let us know in the comments below.

Newsletter Signup

Subscribe to our Monthly Newsletter

* indicates required

Email Format


×
×

jester-logo(613) 667-1616
(647) 477-4335
info@jestercreative.com

Request a Free Estimate

Have a project in mind? We'd love to hear about it. Please provide us with a few details and we'll get in touch with you shortly.

Yeah, we know, we ask a lot of questions, but we really do appreciate you providing us as much information as you can. This will help us to work with you to find the best solutions possible for your project and ensure that we're helping you meet your objectives within your timeline and budget. Thanks and we will be in touch shortly!

Your Name*

Your Email*

What services are you interested in?*
Video ProductionWeb Site DesignMarketing ServicesTrainingOther

If Other, please specify:

Briefly describe your project :*

What is your timeframe for completion?*

What is your estimated price range?*

Please type the text below into the text field:
captcha

*required field

×
Coming Soon!

This fresh new feature is still under development.

Return to this page soon to find out more!

×
Sign Up for KickStart Services

Online application for KickStart services







×