How to resize coords, coordinates for mapped images for responsive images using Javascript


Script and html for responsive image maps.

 

 

<img class="img img-responsive" src='http://www.site.com/images/LAND04012014_Prom.jpg' alt="2014 Prom." usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="415,239,547,372" href="http://www.site.com/somepage.aspx" alt="Prom" />
<area shape="rect" coords="248,409,715,429" href="http://www.pinterest.com/site/prom-ideas/" target="_blank" alt="Pinterest" />
</map>

 
<script>
        /*
        * 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
        * https://github.com/stowball/jQuery-rwdImageMaps
        * http://mattstow.com
        * Licensed under the MIT license
        */
        ; (function ($) {
            $.fn.rwdImageMaps = function () {
                var $img = this;
 
                var rwdImageMap = function () {
                    $img.each(function () {
                        if (typeof ($(this).attr('usemap')) == 'undefined')
                            return;
 
                        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.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());
                            });
                        }).attr('src', $that.attr('src'));
                    });
                };
                $(window).resize(rwdImageMap).trigger('resize');
 
                return this;
            };
        })(jQuery);
    </script>
    <script>
        $(document).ready(function (e) {
            $('img[usemap]').rwdImageMaps();
 
            $('area').on('click', function () {
                alert($(this).attr('alt') + ' clicked');
            });
        });
    </script>
Tags: coordinates, coords, image, maps, responsive
Last update:
2015-01-12 16:12
Author:
Mark
Revision:
1.0
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.