动态调整图像地图和图片大小

Question

动态调整图像地图和图片大小

42

我目前正在尝试在我的网站上制作一个图像地图，它会根据窗口的大小进行调整...我想知道是否有用HTML实现的方法，还是必须使用Javascript或其他语言来完成。

<div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="1920" height="1080" alt="" />
<map id="_Image-Maps_5201211070133251" name="Image-Maps_5201211070133251">
<area shape="poly" coords="737,116,1149,118,944,473," href="http://essper.bandcamp.com" alt="Bandcamp" title="Bandcamp"   />
<area shape="poly" coords="1006,589,1418,590,1211,945," href="http://soundcloud.com/essper" alt="Soundcloud" title="Soundcloud"   />
<area shape="poly" coords="502,590,910,591,708,944," href="http://facebook.com/the.essper" alt="Facebook" title="Facebook"   />
</map>

- ultrazoid

你可以使用CSS来调整div和/或img的大小，但由于区域的坐标是绝对的，因此您可能需要使用JavaScript来完成这个任务。 - Horen

如果我误解了您的问题，请纠正我。您有一个固定大小并居中的 IMG，它不会根据窗口调整大小，现在您想要一个 MAP，它始终只覆盖 IMG 的可见部分？ - Teemu

不，我正在为图像和地图添加动态功能，然后根据图像的大小进行调整。 - ultrazoid

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cédric NICOLAS · Answer 1

改进了@Nagy Zoltán上面的答案，专门针对Vue.js的使用方式您可以将组件传递到其中包含您的图像映射。它将处理动态更新或源映像，通过测试图像是否加载。如果该函数被调用多次，则还将避免在组件中重复调整大小图像映射。

export const MapResizer = {
    mapResizer : function (comp) {
        const map =comp.$refs['image-map'];
        if (!map) return;
        map.img = document.querySelectorAll(`[usemap="#${map.name}"]`)[0];
        if (!map.img) return;
        if (map.resized) return; // don't recompute if already done for the given map as we place a listener
        map.resized = true;

        comp.areas = map.getElementsByTagName('area');
        for (const area of comp.areas) {
            area.coordArr = area.coords.split(',');            
        }
        function resizeMaps() {                        
            const scale = map.img.offsetWidth / (map.img.naturalWidth || map.img.width);
            for (const area of comp.areas) {
                area.coords = area.coordArr.map(coord => Math.round(coord * scale)).join(',');                
            }
        }
        window.addEventListener('resize', () => resizeMaps());
        resizeMaps();
    }    
  };

- Nicolas BADIA · Answer 2

这是我刚写的另一个插件，用于管理图像地图：https://github.com/gestixi/pictarea

除其他功能外，区域根据图像大小自动缩放。请注意，它使用画布来呈现区域。

基本用法：

$(function() {
  $('#map').pictarea({
    rescaleOnResize: true
  });
});

- AnthonyVO · Answer 3

我发现通过调整background-size和所有其他CSS属性的大小和位置，可以从单个图像映射中获取多个图像大小。

以下CSS用于包含多个社交网络图像的ImageMap。使用CSS，我可以提取单个Twitter图标的三种不同大小。

.twitterIcon64 { /* Actual Size */
    background-size: 300px 282px;
    background: url('/images/social-media-icons.png') no-repeat -18px -109px;
    width: 64px;
    height: 64px;
}
.twitterIcon32 { /* 1/2 size */
    background-size: 150px 141px;
    background: url('/images/social-media-icons.png') no-repeat -9px -54px;
    width: 32px;
    height: 32px;
}
.twitterIcon21 { /* 1/3 size */
    background-size: 100px 94px;
    background: url('/images/social-media-icons.png') no-repeat -6px -36px;
    width: 22px;  /* Round up to avoid truncation */
    height: 22px; /* Round up to avoid truncation */
}

这在媒体查询方面非常有效（非常动态）。

如果需要，可以使用JavaScript来选择适当的类或计算适当的大小。

在IE 11、Edge、Firefox和Chrome上进行了测试。