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

我需要创建如下内容：

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

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

最好的解决方案是为我的区域设置百分比值。

---

这可能吗？还有其他建议吗？

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

考虑将Raphaël JavaScript库与一些CSS结合使用。请参阅和。

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

函数findSizes（el，src）{
如果（！el | |！src）{
返回false；
}
否则{
var wGCS=window.getComputedStyle，
pI=parseInt，
维度={}；
尺寸.实际宽度=π（wGCS（el，null）.宽度.替换（'px'，''），10）；
var newImg=document.createElement（'img'）；
newImg.src=src；
newImg.style.position='绝对'；
newImg.style.left='-10000px'；
文件.正文.附件（newImg）；
尺寸原始宽度=新的最小宽度；
文件.body.removeChild（newImg）；
返回维度；
}
}
函数重新映射（imgElem）{
如果（！imgElem）{
返回false；
}
否则{
var mapName=imgElem
.getAttribute（'usemap'）
.子串（1），
map=document.getElementsByName（mapName）[0]，
areas=map.getElementsByTagName（'area'），
imgSrc=imgElem.src，
尺寸=FindSize（imgElem、imgSrc），
currentWidth=大小。实际宽度，
原始宽度=尺寸。原始宽度，
乘数=当前宽度/原始宽度，
纽库德；
对于（变量i=0，len=areas.length；i

但请注意，这需要一个实现

window.getComputedStyle（）

（大多数当前浏览器，但仅限于IE版本9及更高版本）的浏览器。此外，除了确保将所需的参数传递到函数中之外，没有健全性检查。不过，如果你想进行实验，这些应该是一个开始

参考资料：

---

有一个jQuery插件用于此

---

您可能希望（手动）集成我的挂起拉取请求以支持“宽度=100%”：

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

CSS:

HTML:

---

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

您可以检查此插件是否可以挽救生命

当您要映射比例缩放的百分比图像等时非常有用

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

你可以看到它在工作

---

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

函数findSizes（el，src）{
如果（！el | |！src）{
返回false；
}
否则{
var wGCS=window.getComputedStyle，
pI=parseInt，
维度={}；
尺寸.实际宽度=π（wGCS（el，null）.宽度.替换（'px'，''），10）；
var newImg=document.createElement（'img'）；
newImg.src=src；
newImg.style.position='绝对'；
newImg.style.left='-10000px'；
文件.正文.附件（newImg）；
尺寸原始宽度=新的最小宽度；
文件.body.removeChild（newImg）；
返回维度；
}
}
函数重新映射（imgElem）{
如果（！imgElem）{
返回false；
}
否则{
var mapName=imgElem
.getAttribute（'usemap'）
.子串（1），
map=document.getElementsByName（mapName）[0]，
areas=map.getElementsByTagName（'area'），
imgSrc=imgElem.src，
尺寸=FindSize（imgElem、imgSrc），
currentWidth=大小。实际宽度，
原始宽度=尺寸。原始宽度，
乘数=当前宽度/原始宽度，
纽库德；
对于（变量i=0，len=areas.length；i<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>

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);