https://njscuba.net/wp-content/themes/simple/misc/jquery.rwdImageMaps.js

1/*
2* rwdImageMaps jQuery plugin v1.6
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) 2016 Matt Stow
7* https://github.com/stowball/jQuery-rwdImageMaps
8* http ://mattstow.com
9* Licensed under the MIT license
10*/
11
12//// ARG modified for WordPress 2020
13
14if( ! ( typeof window.jQuery === 'undefined' || typeof window.jQuery === undefined ) ){
15
16(function(jQuery) { jQuery.fn.rwdImageMaps = function() {
17
18var $img = this;
19
20var rwdImageMap = function() {
21    $img.each(function() {
22        if(typeof(jQuery(this).attr('usemap')) == 'undefined')
23            return;
24
25        var that = this,
26            $that = jQuery(that);
27
28        jQuery('<img />').on('load', function() {
29        
30        /* //// ARG WordPress deletes width & height, so skip this
31            var attrW = 'width',
32                attrH = 'height',
33                w = $that.attr(attrW),
34                h = $that.attr(attrH);
35
36            if(!w || !h) {
37                var temp = new Image();
38                temp.src = $that.attr('src');
39                if(!w)
40                    w = temp.width;
41                if(!h)
42                    h = temp.height;
43            }
44        */
45
46            var temp = new Image();
47            temp.src = $that.attr('src');
48            var w = temp.width;
49            var h = temp.height; 
50
51            var wPercent = $that.width()/100,
52                hPercent = $that.height()/100,
53                map = $that.attr('usemap').replace('#', ''),
54                c = 'coords';
55
56            jQuery('map[name="' + map + '"]').find('area').each(function() {
57                var $this = jQuery(this); 
58                if(!$this.data(c))
59                    $this.data(c, $this.attr(c));
60
61                var coords = $this.data(c).split(','),
62                    coordsPercent = new Array(coords.length);
63
64                for( var i = 0; i < coordsPercent.length; ++i ) {
65                    if(i % 2 === 0)
66                        coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
67                    else
68                        coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
69                }
70                $this.attr(c, coordsPercent.toString());
71            });
72        }).attr('src', $that.attr('src'));
73    });
74};
75
76jQuery(window).resize(rwdImageMap).trigger('resize');
77
78    return this;
79};
80    
81})(jQuery);
82
83//// ARG keepin' it simple !
84//// include this script just before the </body> tag
85//// and all image maps will become responsive !!!
86
87jQuery(document).ready( function(e) { jQuery('img[usemap]').rwdImageMaps(); });
88
89} //// if( ! ( typeof window.jQuery === undefined ) )