https://ffc-frankfurt.de/fileadmin/javascript/jquery.rwdImageMaps.js

1/*
2* rwdImageMaps jQuery plugin v1.5
3*
4* 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
5*
6* Copyright (c) 2013 Matt Stow
7* https://github.com/stowball/jQuery-rwdImageMaps
8* http://mattstow.com
9* Licensed under the MIT license
10*/
11(function($) {
12        $.fn.rwdImageMaps = function() {
13                var $img = this;
14                
15                var rwdImageMap = function() {
16                        $img.each(function() {
17                                if (typeof($(this).attr('usemap')) == 'undefined')
18                                        return;
19                                
20                                var that = this,
21                                        $that = $(that);
22                                
23                                // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
24                                $('<img />').load(function() {
25                                        var attrW = 'width',
26                                                attrH = 'height',
27                                                w = $that.attr(attrW),
28                                                h = $that.attr(attrH);
29                                        
30                                        if (!w || !h) {
31                                                var temp = new Image();
32                                                temp.src = $that.attr('src');
33                                                if (!w)
34                                                        w = temp.width;
35                                                if (!h)
36                                                        h = temp.height;
37                                        }
38                                        
39                                        var wPercent = $that.width()/100,
40                                                hPercent = $that.height()/100,
41                                                map = $that.attr('usemap').replace('#', ''),
42                                                c = 'coords';
43                                        
44                                        $('map[name="' + map + '"]').find('area').each(function() {
45                                                var $this = $(this);
46                                                if (!$this.data(c))
47                                                        $this.data(c, $this.attr(c));
48                                                
49                                                var coords = $this.data(c).split(','),
50                                                        coordsPercent = new Array(coords.length);
51                                                
52                                                for (var i = 0; i < coordsPercent.length; ++i) {
53                                                        if (i % 2 === 0)
54                                                                coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
55                                                        else
56                                                                coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
57                                                }
58                                                $this.attr(c, coordsPercent.toString());
59                                        });
60                                }).attr('src', $that.attr('src'));
61                        });
62                };
63                $(window).resize(rwdImageMap).trigger('resize');
64                
65                return this;
66        };
67})(jQuery);