调整包含圆的图像地图的大小 [英] Resizing Image Maps containing circles
本文介绍了调整包含圆的图像地图的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试映射下图中的所有数字，这是我所做的。但现在我想根据窗口的宽度动态调整图像和地图的大小。
以下是相关的html：
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> 20键< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css/>
< link rel =stylesheettype =text / csshref =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>
<！ - 首页开头：#home - >
< div data-role =pageid =homedata-theme =b>
< div data-role =header>
< img src =images / 20keyslogo.jpgwidth =100％>
< / div><！ - / header - >
< div class =whitedata-role =contentdata-theme =b>
gt ;
< map id =20Keysname =20Keys>
< area shape =circlealt =Key 1title =coords =41,54,31href =target =/>
< area shape =circlealt =Key 3title =coords =538,543,31href =target =/>
< area shape =circlealt =Key 4title =coords =499,293,31href =target =/>
< area shape =circlealt =Key 5title =coords =484,213,31href =target =/>
< area shape =circlealt =Key 6title =coords =79,293,31href =target =/>
< area shape =circlealt =Key 7title =coords =141,145,31href =target =/>
< area shape =circlealt =Key 8title =coords =483,374,31href =target =/>
< area shape =circlealt =Key 9title =coords =209,99,31href =target =/>
< area shape =circlealt =Key 10title =coords =290,504,31href =target =/>
< area shape =circlealt =Key 11title =coords =289,83,31href =target =/>
< area shape =circlealt =Key 12title =coords =370,99,31href =target =/>
< area shape =circlealt =Key 13title =coords =370,488,31href =target =/>
< area shape =circlealt =Key 14title =coords =95,213,31href =target =/>
< area shape =circlealt =Key 15title =coords =438,442,31href =target =/>
< area shape =circlealt =Key 16title =coords =438,145,31href =target =/>
< area shape =circlealt =Key 17title =coords =95,374,31href =target =/>
< area shape =circlealt =Key 18title =coords =141,442,31href =target =/>
< area shape =circlealt =Key 19title =coords =209,488,31href =target =/>
< area shape =circlealt =Key 20title =coords =538,45,31href =target =/>
< / map>
< p>< a href =＃twodata-role =button>任意两个键之间的相互作用< / a>< / p>
< p>< a href =＃aboutdata-role =button>约20个键< / a>< / p>
< p>< a href =http://www.20keysglobal.comdata-role =button>访问International 20 Keys网站< / a>< / p>
< p>< a href =＃registerdata-role =buttondata-rel =dialogdata-transition =pop>注册专业版< / a>< / p为H.
< p>< a href =mailto：christiaan.grove@odi.co.zadata-role =button>提出改进建议< / a>< / p>
< / div><！ - / content - >
< div data-role =footerdata-theme =d>
< p class =margin>
< / p>
< / div><！ - / footer - >
< / div><！ - /第1页 - >
以下是我在（感谢Teemo）：
window.onload = function（）{
var ImageMap = function（map）{
var n，
areas = map.getElementsByTagName（'area'），
len = areas.length，
coords = []，
previousWidth = 604;
for（n = 0; n
this.resize = function（）{
var n，m，clen，
x = document.body.clientWidth / previousWidth;
for（n = 0; n
}
areas [n] .coords = coords [n] .join（'，'）;
}
previousWidth = document.body.clientWidth;
返回true;
};
window.onresize = this.resize;
}，
imageMap = new ImageMap（document.getElementById（'20Keys'））;
imageMap.resize（）;
return;
图片和地图根据窗口宽度调整大小，但不幸的是完全符合我的愿望。当窗口调整大小时，只有第一个键实际上完全调整大小。对于剩下的部分来说，距离左上角越远越不准确。
我已经将图像变成了一个完美的方形，希望它能够解决这个问题，但它没有。
我对javascript没有太多经验，而且我的数学技能不是他们以前的样子。所有的帮助将不胜感激。感谢您的提前。
解决方案
可能图像的宽度不是100％
而不是使用 document.body.clientWidth 计算比例（ x ），使用<$ c
$ b
x = img.offsetWidth / previousWidth;
：
previousWidth = img.offsetWidth;
请注意，图像的宽高比不需要是1：1，比例是双方向相同，只要你保持图像的原始比例。
（原始代码可能与原始问题绑定太多，而不是一个通用的多用途地图调整器。）
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.
Here's the relevant 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: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 -->
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.
解决方案
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;
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.)
这篇关于调整包含圆的图像地图的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
