有没有一种方法可以调整图像大小并使图像映射保持在原位？（HTML / JavaScript / CSS）

Question

我正在制作一个旨在进行测试的网站。它包含一张图片和一个图片映射区域。我试图使用JavaScript来获取客户端屏幕大小并调整图片大小以适应客户端屏幕大小，但是当我这样做时，图片映射区域不在我需要的位置上。有没有一种方法可以使图片映射区域保持在原位而不必在Paint或Photoshop中“物理”调整图片大小。我的网站（不获取客户端屏幕大小）。基本上，我试图让图片适应他们的屏幕，以便更容易地浏览测试，更加真实，但又不会破坏我的图片映射区域定位。非常感谢您提供任何帮助。

    `<map name="desktopmap" >
    <area onclick="correct();" shape="rect" coords="1,575,38,597"  href="OS2.html" >  
    </map>
    <img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`

谢谢。

- Dave Cribbs

---

首先，你可以通过找到光标变成指针的地方来找到每一个答案。其次，如果没有发布一些代码，很难帮助你解决问题。 - apohl

我认为你没有理解我的问题，当图片被调整大小时，图片映射会移动。有没有办法让它不要移动。<map name="desktopmap" > <area onclick="correct();" shape="rect" coords="1,575,38,597" href="OS2.html" >
</map> <img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" > - Dave Cribbs

你可以使用绝对定位的div，其坐标和宽度基于百分比，并将点击事件挂钩到这些div上。图像映射有点过时了。 - justisb

好的，谢谢你，我会尝试的。 - Dave Cribbs

可能是 Making Hard-coded -dimensions with relative values reusable with area-map? 的重复。https://dev59.com/BGgu5IYBdhLWcg3wYWJX - CBroe

Answer 1

你可以使用绝对定位的div，并使用基于百分比的坐标和尺寸，将点击事件挂钩到这些div上。这样可以使得你的不可见“按钮”随着图像的缩放而自适应。图片映射有点过时且不太灵活。

示例fiddle（已更新正确/错误函数）：

http://jsfiddle.net/3ZLeK/1/

示例新的HTML结构：

<div class="wrap">
    <img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
    <div class="box box1"></div>    
</div>

示例新的CSS：

.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

在这个fiddle中，我还改变了你的内联JavaScript处理方式，使用事件处理程序，因为那些属性处理程序也已经过时了。

- justisb

Answer 2

您可以使用媒体查询来调整/缩放地图。 这里有两个实验测试: http://dabblet.com/gist/5586117 和 http://codepen.io/gcyrillus/pen/AJHmt

如果您遵循这个想法，考虑使用缩放+JavaScript而不是媒体查询来包括较旧的浏览器，如IE，请注意某些版本的IE都理解：transform:scale(x);和zoom:X;。在这种情况下，请确保不要多次应用重新缩放。

基本上，坐标是像素坐标，缩放是唯一的方法，除非您修改每个坐标值的值:)

......不太确定我的英语是否足够清晰/正确。

- G-Cyrillus