是否可以按百分比创建地图 html 区域？

Question

我需要创建这样的东西：

http://www.mrporter.com/journal/journal_issue71/2#2

我的大图中的每个产品都与鼠标悬停时出现的工具提示相关联。 但我需要它来处理全屏图像。

我想到的第一个解决方案（如上面的示例）是 ma​​p html 解决方案，其中每个解决方案都准确地填充了我的产品边界。 问题是我无法为我指定精确值，因为我的图像大小取决于窗口屏幕。

最好的解决方案是为我的区域设置百分比值。 这可能吗？还有其他建议吗？

Answer 1

使用链接的替代解决方案：

CSS：

.image{
  position: relative;
}
.image a{
  display: block;      
  position: absolute;
}

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>

可以在图形编辑器中检测百分比尺寸

Answer 2

jQuery RWD Image Maps 有一个 jQuery 插件。

您可能希望（手动）集成我的待处理拉取请求以支持“width=100%”：https://github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 3

你可以检查一下这个插件是救命的。

当您想要映射百分比缩放的图像等时很有用。

它可以与jQuery一起使用，也可以不与jQuery一起使用。

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

你可以看到它在工作。

http://davidjbradshaw.com/imagemap-resizer/example/

Answer 4

因为这不能通过简单的 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);​

JS Fiddle demo.

但请注意，这需要实现 window.getComputedStyle() 的浏览器（大多数当前浏览器，但仅在 IE 9 及更高版本中）。此外，除了确保将所需的参数传递给函数之外，没有任何完整性检查。不过，如果您想尝试，这些应该是一个开始。

参考资料：

• document.body。
• document.createElement().
• document.getElementsByName()。
• document.getElementsByTagName()。
• element.getAttribute()。
• element.setAttribute().
• element.style。
• Math.round()。
• node.appendChild()。
• node.removeChild()。
• parseInt()。
• string.replace()。
• string.substring()。
• window.getComputedStyle。

Answer 5

图像映射中的百分比不是一个选项。您可能需要一些脚本（JS）来重新计算图像调整大小的确切位置。当然，在该脚本中，您可以根据需要使用百分比。

Answer 6

考虑使用带有一些 CSS 的 Raphaël JavaScript 库。见http://raphaeljs.com/ 和Drawing over an image using Raphael.js。

Answer 7

我知道这是一个老问题，但也许有人像我一样在某个时候需要这个。我修改了@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);