是否可以按百分比创建地图 html 区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11363358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is possible create map html area in percentage?
提问by Stefano Ortisi
I need to create something like this:
我需要创建这样的东西：
http://www.mrporter.com/journal/journal_issue71/2#2
http://www.mrporter.com/journal/journal_issue71/2#2
where every product in my big image is associated with a tooltip which appears on mouse hover. But I need this to work with fullscreen images.
我的大图中的每个产品都与鼠标悬停时出现的工具提示相关联。但我需要它来处理全屏图像。
The first solution I thought (as the example above) is the map htmlsolution where each fill up exactly the boundaries of my products. The problem is that I can'tindicate precise valuesfor my because my image size depends on window screen.
我想到的第一个解决方案（如上面的示例）是地图 html解决方案，其中每个解决方案都准确地填充了我的产品的边界。问题是我无法为我指定精确的值，因为我的图像大小取决于窗口屏幕。
The best solution would be the possibility to set percentage valuesfor my area. Is this possible? Any other suggestions ?
最好的解决方案是可以为我的区域设置百分比值。这可能吗？还有其他建议吗？
回答by hrozino
Alternative solution using links:
使用链接的替代解决方案：
CSS:
CSS：
.image{
position: relative;
}
.image a{
display: block;
position: absolute;
}
HTML:
HTML：
<div class="image">
<img src="image.jpg" alt="image" />
<a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a>
<a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a>
<a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a>
</div>
Percentage dimensions can be detected in graphic editors
可以在图形编辑器中检测百分比尺寸
回答by blueyed
There is a jQuery plugin for this jQuery RWD Image Maps.
这个jQuery RWD Image Maps有一个 jQuery 插件。
You might want to integrate my pending pull request (manually) to support "width=100%": https://github.com/stowball/jQuery-rwdImageMaps/pull/10
您可能希望（手动）集成我的待处理拉取请求以支持“width=100%”：https: //github.com/stowball/jQuery-rwdImageMaps/pull/10
回答by Sword I
you can check this this plugin is life saving.
你可以检查这个这个插件是救命的。
Useful when you want to map a percentage scaled image etc.
当您想要映射百分比缩放图像等时很有用。
It can be used with or without jQuery.
它可以在有或没有 jQuery 的情况下使用。
https://github.com/davidjbradshaw/imagemap-resizer
https://github.com/davidjbradshaw/imagemap-resizer
and you can see it working at.
你可以看到它在工作。
回答by David says reinstate Monica
Because this can't be done with simple HTML/CSS manipulation, the only alternative is JavaScript to, effectively, recalculate the coordinates based on the resizing of the image. To this end I've put together a function (though there's two functions involved) that achieves this end:
因为这不能通过简单的 HTML/CSS 操作来完成，唯一的替代方法是 JavaScript，可以根据图像的大小调整有效地重新计算坐标。为此，我整理了一个实现此目的的函数（尽管涉及两个函数）：
function findSizes(el, src) {
if (!el || !src) {
return false;
}
else {
var wGCS = window.getComputedStyle,
pI = parseInt,
dimensions = {};
dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10);
var newImg = document.createElement('img');
newImg.src = src;
newImg.style.position = 'absolute';
newImg.style.left = '-10000px';
document.body.appendChild(newImg);
dimensions.originalWidth = newImg.width;
document.body.removeChild(newImg);
return dimensions;
}
}
function remap(imgElem) {
if (!imgElem) {
return false;
}
else {
var mapName = imgElem
.getAttribute('usemap')
.substring(1),
map = document.getElementsByName(mapName)[0],
areas = map.getElementsByTagName('area'),
imgSrc = imgElem.src,
sizes = findSizes(imgElem, imgSrc),
currentWidth = sizes.actualWidth,
originalWidth = sizes.originalWidth,
multiplier = currentWidth / originalWidth,
newCoords;
for (var i = 0, len = areas.length; i < len; i++) {
newCoords = areas[i]
.getAttribute('coords')
.replace(/(\d+)/g,function(a){
return Math.round(a * multiplier);
});
areas[i].setAttribute('coords',newCoords);
}
}
}
var imgElement = document.getElementsByTagName('img')[0];
remap(imgElement);?
Please note, though, that this requires a browser that implements window.getComputedStyle()(most current browsers, but only in IE from version 9, and above). Also, there are no sanity checks other than ensuring the required arguments are passed into the functions. These should, though, be a start if you want to experiment.
但是请注意，这需要一个能够实现的浏览器window.getComputedStyle()（大多数当前的浏览器，但仅限于版本 9 及更高版本的 IE）。此外，除了确保将所需参数传递到函数中之外，没有其他健全性检查。但是，如果您想进行实验，这些应该是一个开始。
References:
参考：
回答by Bas Slagter
Percentages in image maps are not an option. You might want to get some scripting involved (JS) that recalculates the exact position on images resize. Of course, in that script you can work with percentages if you want.
图像映射中的百分比不是一个选项。您可能希望使用一些脚本 (JS) 来重新计算图像调整大小的确切位置。当然，在该脚本中，您可以根据需要使用百分比。
回答by technoTarek
Consider using the Rapha?l JavaScript Library with some CSS. See http://raphaeljs.com/and Drawing over an image using Raphael.js.
考虑使用带有一些 CSS 的 Rapha?l JavaScript 库。请参阅http://raphaeljs.com/和使用 Raphael.js 绘制图像。
回答by Mihai Fratu
I know this is an old question but maybe someone needs this at some point as I did. I modified @David Thomas' answer a bit to be have this little piece of JS be able to handle future recalculations:
我知道这是一个老问题，但也许有人像我一样在某个时候需要这个。我稍微修改了@David Thomas 的回答，让这小块 JS 能够处理未来的重新计算：
function findSizes(el, src) {
if (!el || !src) {
return false;
}
else {
var wGCS = window.getComputedStyle,
pI = parseInt,
dimensions = {};
dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10);
var newImg = document.createElement('img');
newImg.src = src;
newImg.style.position = 'absolute';
newImg.style.left = '-10000px';
document.body.appendChild(newImg);
dimensions.originalWidth = newImg.width;
document.body.removeChild(newImg);
return dimensions;
}
}
function remap(imgElem) {
if (!imgElem) {
return false;
}
else {
var mapName = imgElem
.getAttribute('usemap')
.substring(1),
map = document.getElementsByName(mapName)[0],
areas = map.getElementsByTagName('area'),
imgSrc = imgElem.src,
sizes = findSizes(imgElem, imgSrc),
currentWidth = sizes.actualWidth,
originalWidth = sizes.originalWidth,
multiplier = currentWidth / originalWidth,
newCoords;
for (var i = 0, len = areas.length; i < len; i++) {
// Save original coordinates for future use
var originalCoords = areas[i].getAttribute('data-original-coords');
if (originalCoords == undefined) {
originalCoords = areas[i].getAttribute('coords');
areas[i].setAttribute('data-original-coords', originalCoords);
}
newCoords = originalCoords.replace(/(\d+)/g,function(a){
return Math.round(a * multiplier);
});
areas[i].setAttribute('coords',newCoords);
}
}
}
function remapImage() {
var imgElement = document.getElementsByTagName('img')[0];
remap(imgElement);
}
// Add a window resize event listener
var addEvent = function(object, type, callback) {
if (object == null || typeof(object) == 'undefined') return;
if (object.addEventListener) {
object.addEventListener(type, callback, false);
} else if (object.attachEvent) {
object.attachEvent("on" + type, callback);
} else {
object["on"+type] = callback;
}
};
addEvent(window, "resize", remapImage);
