Responsive Design Image Map re-sizing coords with JQuery. How to remap the coordinates of links mapped to a/an responsive image

This script (by Matt Stow - uses jQuery to remap the coords - coordinates - of an image when it is resized (window.resize) for use on mobile devices. By remapping the coords, the links or areas that are mapped in the image will change in accordance to the size of the image. I've added some notes to the original script but you can find the original demo here

the html for your image and coordinate areas (map), this script uses 'img img-responsive from the bootstrap framework to make the image responsive. check out bootstrap at

<div style="text-align: center;">

<img class="img img-responsive" src='Prom.jpg' alt="Prom" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="415,239,547,372" href="/phpmyfaq/index.php?action=artikel&lang=en&cat=4&id=19&artlang=en#link1" alt="Prom" />
<area shape="rect" coords="248,409,715,429" href="/phpmyfaq/index.php?action=artikel&lang=en&cat=4&id=19&artlang=en#link2" alt="Pinterest" />


The two following scripts need to be added to your page before the closing body tag (and you will also need to be referencing the jquery library either in a site header/master include file/or at least before these two scripts (in the head is fine or right before these two like the code below) in order to use jQuery library

<script src=""></script>

The following script can be linked to externally

* rwdImageMaps jQuery plugin v1.5
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
* Copyright (c) 2013 Matt Stow
* Licensed under the MIT license
; (function ($) {
$.fn.rwdImageMaps = function () {
var $img = this;

var rwdImageMap = function () {
$img.each(function () {
if (typeof ($(this).attr('usemap')) == 'undefined')

var that = this,
$that = $(that);

// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').load(function () {
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);

if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;

var wPercent = $that.width() / 100,
hPercent = $that.height() / 100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';

$('map[name="' + map + '"]').find('area').each(function () {
var $this = $(this);
if (!$
$, $this.attr(c));

var coords = $','),
coordsPercent = new Array(coords.length);

for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i] / w) * 100) * wPercent);
coordsPercent[i] = parseInt(((coords[i] / h) * 100) * hPercent);
$this.attr(c, coordsPercent.toString());
}).attr('src', $that.attr('src'));

return this;


Include this script in your page after you have included the above script either in page or externally

$(document).ready(function (e) {

$('area').on('click', function () {

//you can navigate to a new url or do something with JavaScript here when the link is clicked, //this just grabs the value in the alt attribute and makes an alert
alert($(this).attr('alt') + ' clicked');



Tags: responsive image
Last update:
2014-09-08 20:09
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.