resizeImageMap.js

define("resizeImageMap", ["jquery"], function($) {
    var $window = $(window);
    var dataAttr = "data-src";

    $.fn.resizeImageMap = function() {
        var $images = $(this);

        var resizeImageMap = function() {

            $images.each(function() {
                var $image = $(this),
                    map = $image.attr("usemap"),
                    src = $image.attr("src") || $image.attr(dataAttr);

                if (typeof map == "undefined") {
                    return;
                }

                $image.on("load", function() {
                    // 实际的宽高
                    var width = this.width,
                        height = this.height;

                    $("<img />").on("load", function() {
                        var originalWidth = this.width;
                        var originalHeight = this.height;

                        $('map[name="' + map.slice(1) + '"]').find("area").each(function() {
                            var $map = $(this);

                            if (!$map.data("coords")) {
                                $map.data("coords", $map.attr("coords"));
                            }

                            var coords = $map.data("coords").split(","),
                                coordsNew = new Array(coords.length);

                            for (var i = 0; i < coordsNew.length; ++i) {
                                if (i % 2 === 0) {
                                    coordsNew[i] = parseInt(parseInt(coords[i].trim()) * width / originalWidth);
                                } else {
                                    coordsNew[i] = parseInt(parseInt(coords[i].trim()) * height / originalHeight);
                                }
                            }

                            $map.attr("coords", coordsNew.toString());
                        });
                    }).attr("src", src).each(function() {
                        if(this.complete) {
                            $(this).load();
                        }
                    });

                });

                if ($image.attr(dataAttr)) {
                    $image.attr("src", src).removeAttr(dataAttr);
                }

                $image.each(function() {
                    if(this.complete) {
                        $(this).load();
                    }
                });
            });

        };

        $window.resize(resizeImageMap);
        resizeImageMap();
    };
});