Dynamically Resizing Image-Maps and Images

Dynamically resizing Image-maps and images

If you end up to do the task with JavaScript, here is a cross-browser codesnippet to resize all areas in MAP element.

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'));
    imageMap.resize();
}

previousWidth must be equal to the width of the original image. You also need to use some relative units in HTML:

<div style="width:100%;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="Sample Image" />

Working demo at jsFiddle. If you open the fiddle in IE, you can actually see AREAs when clicking them.

Resizing Image Maps containing circles

Probably the width of the image is not 100% of the body.
Instead of calculating the scale (x) with document.body.clientWidth, use the offsetWidth of the image:

x = img.offsetWidth / previousWidth;
                 :
previousWidth = img.offsetWidth;

A live demo at jsFiddle.

Notice, that the aspect ratio of the image doesn't need to be 1:1, the scale is the same for both directions, as long as you keep the original ratio of the image.

(The original code is maybe too much binded to the original question, rather than being a generic multi-purpose map resizer.)

javascript image map resizing issue

The first problem I see is, you can not access the map element using the document.getElementById('planetbobmap')

since in the map element attribute id is not defined.

Try with this html change.

<map id = "planetbobmap" name="planetbobmap">

Responsive image map

For responsive image maps you will need to use a plugin:

https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)

Or

https://github.com/davidjbradshaw/imagemap-resizer

---

No major browsers understand percentage coordinates correctly, and all
interpret percentage coordinates as pixel coordinates.

http://www.howtocreate.co.uk/tutorials/html/imagemaps

And also this page for testing whether browsers implement

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

image map/ area coordinate update on resize

Here is a great jQuery PlugIn that does exactly what you wanted:

Responsive Image Maps jQuery Plugin

/*    
* rwdImageMaps jQuery plugin v1.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     
*    
* Copyright (c) 2012 Matt Stow    
* https://github.com/stowball/jQuery-rwdImageMaps    
* http://mattstow.com    
* Licensed  under the MIT license
*/

Hope that helps

---

Related Topics