by Tony Gamble
Image 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.