forked from stowball/jQuery-rwdImageMaps
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.rwdImageMaps.js
42 lines (41 loc) · 1.28 KB
/
jquery.rwdImageMaps.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*
* rwdImageMaps jQuery plugin v1.0
*
* 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) 2012 Matt Stow
* http://mattstow.com
* Licensed under the MIT license
*/
(function($) {
var w, h;
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var wPercent = $(this).width()/100, hPercent = $(this).height()/100, map = $(this).attr('usemap').replace('#', ''), c = 'coords';
if (w == undefined) {
w = $img.attr('width'), h = $img.attr('height');
}
$('map[name="' + map + '"]').find('area').each(function() {
if (!$(this).data(c))
$(this).data(c, $(this).attr(c));
var coords = $(this).data(c).split(','), 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);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$(this).attr(c, coordsPercent.toString());
});
});
};
rwdImageMap();
$(window).resize(function() {
rwdImageMap();
});
};
})(jQuery);