调整包含圆圈的图像地图的大小
Posted
技术标签:
【中文标题】调整包含圆圈的图像地图的大小【英文标题】：Resizing Image Maps containing circles 【发布时间】：2014-07-08 06:41:29 【问题描述】：我正在尝试映射下图中的所有数字，我已经完成了。但是现在我想根据窗口的宽度动态调整图像和地图的大小。
这是相关的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" >
</div><!-- /header -->
<div class="white" data-role="content" data-theme="b">
<img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" title="" coords="41,54,31" href="" target="" />
<area shape="circle" title="" coords="41,543,31" href="" target="" />
<area shape="circle" title="" coords="538,543,31" href="" target="" />
<area shape="circle" title="" coords="499,293,31" href="" target="" />
<area shape="circle" title="" coords="484,213,31" href="" target="" />
<area shape="circle" title="" coords="79,293,31" href="" target="" />
<area shape="circle" title="" coords="141,145,31" href="" target="" />
<area shape="circle" title="" coords="483,374,31" href="" target="" />
<area shape="circle" title="" coords="209,99,31" href="" target="" />
<area shape="circle" title="" coords="290,504,31" href="" target="" />
<area shape="circle" title="" coords="289,83,31" href="" target="" />
<area shape="circle" title="" coords="370,99,31" href="" target="" />
<area shape="circle" title="" coords="370,488,31" href="" target="" />
<area shape="circle" title="" coords="95,213,31" href="" target="" />
<area shape="circle" title="" coords="438,442,31" href="" target="" />
<area shape="circle" title="" coords="438,145,31" href="" target="" />
<area shape="circle" title="" coords="95,374,31" href="" target="" />
<area shape="circle" title="" coords="141,442,31" href="" target="" />
<area shape="circle" title="" coords="209,488,31" href="" target="" />
<area shape="circle" 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:christiaan.grove@odi.co.za" 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 -->
这是我在 Dynamically resizing Image-maps and images 的最佳答案中使用的 javascript（感谢 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;
图像和地图确实会根据窗口宽度调整大小，但不幸的是，它并没有我想要的那么完美。当窗口调整大小时，实际上只有第一个 Key 可以完美调整大小。其余的，离左上角越远越不准确。
我已经将图像更改为一个完美的正方形，希望它能解决问题，但它没有。
我在 javascript 方面没有太多经验，而且我的数学技能也不是以前那样。所有帮助将不胜感激。提前谢谢你。
【问题讨论】：
嗯...在最新的 Chrome、FF 和 IE 中似乎是 quite accurate。任何特定的浏览器会导致问题？ 试试这个查询插件，非常适合我：github.com/stowball/jQuery-rwdImageMaps @Teemu，是的，它在我的任何浏览器中都不起作用（但在您的 JFiddle 示例中可以正常工作），我已将 html 的第一页添加到问题中。这里有什么影响吗？ 【参考方案1】：可能图像的宽度不是body 的100%。
不要用document.body.clientWidth计算比例（x），而是使用图像的offsetWidth：
x = img.offsetWidth / previousWidth;
:
previousWidth = img.offsetWidth;
A live demo at jsFiddle.
请注意，图片的纵横比不必是 1:1，两个方向的比例都是一样的，只要保持图片的原始比例即可。
（原始代码可能与原始问题过于绑定，而不是通用的多用途地图调整器。）
【讨论】：
谢谢提姆！现在这是一个了不起的多用途地图调整器......使用 Javascript 而不是使用 jquery 方式很好，它可以防止以后出现并发症。 @BarryDoyle 如果与debouncer 一起使用，它会变得更好。onresize 在调整大小的过程中每秒会触发数十次，如果您的 map 很大，则可能会计算不正确的比例。从 debouncer 调用 imageMap.resize 将保持比例始终正确。
谢谢提姆。效果很好。
感谢@Teemu，这是一件艺术品！【参考方案2】：
您可能会发现我的这个小项目很有帮助，作为一个更通用的解决方案，它还可以处理页面上的非固定纵横比和多个 ImageMap。
https://github.com/davidjbradshaw/imagemap-resizer
【讨论】：
很棒的小插件。它拯救了我的一天。以前的解决方案都不适合我，谢谢。以上是关于调整包含圆圈的图像地图的大小的主要内容，如果未能解决你的问题，请参考以下文章