16

我需要创建这样的东西：

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

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

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

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

4

7 回答 7

24

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

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>

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

于 2014-10-07T08:14:52.857 回答
5
于 2012-11-06T10:26:16.033 回答
4

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

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

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

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

你可以看到它在工作。

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

于 2018-06-05T21:39:06.757 回答
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 小提琴演示。

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

参考：

于 2012-07-06T18:21:16.027 回答
1

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

于 2012-07-06T13:45:11.243 回答
0

考虑使用带有一些 CSS 的 Raphaël JavaScript 库。请参阅http://raphaeljs.com/和使用 Raphael.js 绘制图像。

于 2012-07-06T14:04:33.103 回答
0

我知道这是一个老问题，但也许有人像我一样在某个时候需要这个。我修改了@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);
于 2018-06-15T10:59:08.693 回答