html - 在 HTML 中缩放图像映射

Question

我有一个现有的 HTML 页面，其中包含一个带有相应图像映射的图像。

我想在不同的页面中使用图像，但由于可用空间较小，需要对其进行缩放。问题是，如果我缩放图像，则图像映射不再适用于它。

如何实现与图像和图像映射组合相同的效果，但允许缩放图像？

Answer 1

这是一个图像映射调整器：

http://blog.outsharked.com/p/image-map-resizer.html

它使用的基本代码的简化版本如下所示：

map.find('area').each(function() {
    var j,coordx,coordy,
        area = $(this),
        coords = area.attr('coords').split(','),
        isVisible=true,
        newCoords = ''; 

     for (j = 0; j < coords.length; j+=2) {
             coordx = parseInt(coords[j],10);
             coordy = parseInt( coords[j+1],10);

             // ignore last coord if uneven numbers (meaning it's a circle)

             newCoords += (!newCoords ? '' : ',') + Math.round(coordx * xAmount) + 
                (j+1<coords.length ? ','+ Math.round(coordy * yAmount) : '');
        }
}

它基本上遍历每个区域，重新计算坐标数据。

您应该能够将此与window.resize事件协调以同时更改图像映射和图像的大小。因为 window.resize 在用户缩放窗口时会触发多次，所以您可能不想在每次触发事件时都尝试调整图像映射的大小。由于它是计算密集型的，因此可能会导致用户体验缓慢。相反，缓冲它并且每隔一段时间只做一次调整大小。

这是一个小提琴，展示了如何使用 ImageMapster jquery 插件缓冲 window.resize 事件以执行相同的操作：http: //jsfiddle.net/jamietre/jQG48/