Image Maps saved my Life

I haven’t had a need to use image maps since back in the day,when I would create a huge image and instead of slicing it, then I would use an image map to give click positions.

Image maps basically give you the ability to create a ‘map’ of an area on an image to implement more than one (1) link.  For example, you may have a Image of a city, and you want the user to be able to click on the town hall, police station, and fire department which all go to the entities own site.

When the SEO boom came, and page load became a high priority – most developers stopped using Image Maps except for those few edge cases where there was no alternative.

Ironically, I ran into an issue where I wanted multiple larger click area on a Mobile device vs the small area that the image itself would provide.  Plus, I was looking for a quick and dirty solution that would be responsive and clean.  Well, reluctantly I tried an Image Map JavaScript class and it worked!

The Responsive Image Maps jQuery Plugin by Matt Stow is pretty clean and easy to implement.

Here’s a look at what I used.

<img src='images/img1.jpg' width="200" height="300" class="image" usemap="#img1" alt='Image Info'  />
                <map name="img1">
                    <area shape="rect" coords="0,0,500,275" alt="Area1" href="http://www.makinitcool.com/area1" target="_blank">
                    <area shape="rect" coords="0,300,500,526" alt="Area2" href="http://www.makinitcool.com/area2" target="_blank">
                    <area shape="rect" coords="600,300,1000,526" alt="Area3" href="http://www.makinitcool.com/area3" target="_blank">
                </map>

Since the site was a single-page app, that had some custom Media Tags for mobile devices I wasn’t concerned about SEO.  I optimized the image, since it was designed for mobile devices -it was already much smaller than a desktop version.

‘We killin’ them for freedom cause they tortured us for boredom’ – Killa Mike – Close Your Eyes

More info:

https://github.com/stowball/jQuery-rwdImageMaps

http://www.w3schools.com/tags/tag_map.asp