Ridimensionamento di mappe di image contenenti cerchi

Sto cercando di mappare tutti i numbers nell'image qui sotto, che ho fatto. Ma ora voglio ridimensionare dynamicmente l'image e la mappa in base alla width della window.

immettere qui la descrizione dell'immagine

Ecco il relativo html:

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>20 Keys</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <script src="js/script.js"></script> </head> <body> <!-- Start of first page: #home--> <div data-role="page" id="home" data-theme="b"> <div data-role="header"> <img src="images/20keyslogo.jpg" width="100%"> </div><!-- /header --> <div class="white" data-role="content" data-theme="b"> <img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/> <map id="20Keys" name="20Keys"> <area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" /> <area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" /> <area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" /> <area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" /> <area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" /> <area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" /> <area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" /> <area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" /> <area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" /> <area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" /> <area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" /> <area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" /> <area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" /> <area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" /> <area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" /> <area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" /> <area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" /> <area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" /> <area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" /> <area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" /> </map> <p><a href="#two" data-role="button">Interactions between any two keys</a></p> <p><a href="#about" data-role="button">About 20 Keys</a></p> <p><a href="http://www.20keysglobal.com" data-role="button">Visit International 20 Keys Website</a></p> <p><a href="#register" data-role="button" data-rel="dialog" data-transition="pop">Register for Pro Version</a></p> <p><a href="mailto:[email protected]" data-role="button">Make Suggestion for Improvement</a></p> </div><!-- /content --> <div data-role="footer" data-theme="d"> <p class="margin"> <a href="#home" data-rel="back" data-role="button" data-inline="true" data-icon="gear">Settings</a> </p> </div><!-- /footer --> </div><!-- /page one --> 

Ecco il javascript che ho usato dalla risposta migliore nel ridimensionamento dinamico di mappe e immagini di immagini (grazie a 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; } 

L'image e la mappa si ridimensionano in base alla width della window, ma purtroppo non come perfettamente come mi piacerebbe. Solo la prima chiave si ridimensiona perfettamente quando la window si ridimensiona. Per il resto, più lontano dalla parte superiore sinistra più è imprecisa.

Ho già cambiato l'image per essere una piazza perfetta nella speranza che risolverà il problema, ma non lo è.

Non sono troppo esperto in javascript, e le mie abilità matematiche non sono quelle che erano. Tutto l'aiuto sarà apprezzato. Grazie in anticipo.

Probabilmente la width dell'image non è del 100% del body . Invece di calcolare la scala ( x ) con document.body.clientWidth , utilizzare l' offsetWidth dell'image:

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

Una demo live a jsFiddle .

Si noti che il rapporto di aspetto dell'image non deve essere di 1: 1, la scala è la stessa per entrambe le direzioni, purché manteniate il rapporto originale dell'image.

(Il codice originale è forse troppo legato alla domanda originale, piuttosto che essere un generico generatore di mappe multifunzionali.)

Potresti trovare questo piccolo progetto mio utile, come una soluzione più generica, che si occupa anche di rapporti di aspetto non fisso e di più ImageMaps sulla pagina.

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