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在用户缩放窗口时会多次触发，因此您可能不希望每次触发事件时都尝试调整imagemap的大小。由于它是计算密集型的，因此可能会导致用户体验变慢。相反，缓冲它并且每隔一段时间只调整一次。

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

在HTML中缩放图像映射

1 个答案: