Question

我需要创建这样的东西：

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

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

我认为的第一个解决方案（如上例所示）是 map 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

因为使用简单的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()的浏览器（大多数当前浏览器，但仅限于版本9及更高版本的IE）。此外，除了确保将所需参数传递给函数之外，没有健全性检查。但是，如果你想进行实验，这些应该是一个开始。

参考文献：

Answer 4

图像映射中的百分比不是一种选择。您可能希望获得一些脚本（JS），重新计算图像调整大小的确切位置。当然，在该脚本中，如果需要，您可以使用百分比。

Answer 5

你可以检查这个插件是否可以挽救生命。

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

它可以在有或没有jQuery的情况下使用。

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

你可以看到它在工作。

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

Answer 6

考虑将RaphaëlJavaScript库与一些CSS一起使用。请参阅http://raphaeljs.com/和Drawing over an image using Raphael.js。

Answer 7

我知道这是一个古老的问题，但也许某人在某些时候需要这样做，就像我一样。我修改了@David Thomas＆＃39;回答一下，让这个小小的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);

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

7 个答案: