Resizing Image Maps containing circles

Question

I'm trying to map all the numbers in the image below, which I've done. But now I want to dynamically resize the image and map according to the window's width.

enter image description here

Here's the relevant html:

    


    
     
    20 Keys 

    
    

    
    
    

 

 

 

    
        
    


      

    
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        Interactions between any two keys  
        About 20 Keys    
        Visit International 20 Keys Website                 
        Register for Pro Version
        Make Suggestion for Improvement
    


    

        
        Settings

And here's the javascript I used from the best answer in Dynamically resizing Image-maps and images (thanks Teemo):

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 604;
            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('20Keys'));
    imageMap.resize();
    return;
}

The image and map does resize on according to the window width but unfortunately not as perfectly as I'd like it to. Only the first Key actually resizes perfectly when the window resizes. For the rest, the further away from the top left the more inaccurate it is.

I've already changed the image to be a perfect square in hope that it'll fix the problem but it hasn't.

I'm not too experienced in javascript, and my math skills aren't what they used to be. All help will be appreciated. Thank you in advance.

Teemu · Accepted Answer

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.)

Resizing Image Maps containing circles

Answers (2)

Related Questions