Responsive Image Map Plugin … No, Seriously

So let me take you back to when glittery animated gifs were the norm, dancing baby images were on Ally McBeal and all over the internet and Pearl Jam wasn’t classic rock. Image maps were used a LOT back then for creating hot spots on images to provide links without having to slice up any images.

The use of image maps is obviously an old school, not-used-very-much, if at all, method today but once in a great while you’ll get a task that requires digging back far into your past. This was one such case…

This is really marrying something new (responsive design) with something old (image maps). I wrote a plugin that allows you to select which image map you’d like to make responsive. The plugin takes the original coordinates of each map > area and stores it in an array – once the image size changes, it takes the percentage the width has changed and updates the coordinates in the array by that percentage and stores them in a new array to use to  resize the map areas.

Requirements

  • This script requires the jQuery JavaScript library.  Ensure this library is attached to your html

Download

Demo


How to Use It

Each image and image map must be in their own container with unique class

<div class="image-map-wrapper us-map">
    <map id="ImageMap_1_806238118" name="ImageMap_1_806238118">
        <area title="Alabama" alt="Alabama" coords="537,310,..." shape="poly" href="/wiki/Alabama">
        <area title="Alaska" alt="Alaska" coords="127,381,..." shape="poly" href="/wiki/Alaska">
    </map>
    <img width="800" height="495" usemap="#ImageMap_1_806238118" src="..." alt="">
</div>

then in your script you will call your function with 2 attributes – the class selector and the original image width when the image map was created

responsiveImageMap('.us-map',800);

You may also like...

2 Responses

  1. Mark says:

    Hi,

    I’m desperately trying to implement a large respsonive image on our home page with 9 links that will scale up/down responsively, I’ve tried the other scritps ive seen online using the RWD script, which worked, but this uses a command that seems to kill all our menus etc when we put the image in its editble element on the website…I cant figure out why

    I was hoping to use the above solution , but im struggling to get my head around implementing it into tho the following code? if you could give me an example i would then be able to go in and complete the rest, it would be greatly appreciated..

    Homeandcountry.jpg

    • Sonny says:

      Hi Mark

      I think the comment box stripped some code you might have pasted here? Am I right?

      I’ll check the site out this evening and let you know what I see or give suggestions on how to implement this. Is the image/image map in place currently on your homepage?

      If not – can you send me the code via email? artist@sonnyeom.com

      Thank you.

Leave a Reply

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

6 + 18 =