有没有办法调整图像大小并使图像映射保持在同一位置?(html/Javascript/CSS)

Question

我目前正在制作一个旨在进行测试的网站。它有一个图像和一个图像映射，我正在尝试使用 JavaScript 来获取客户端屏幕大小并调整图像大小以适应客户端屏幕尺寸，但当我这样做时，图像映射不是我需要的。有没有办法让图像映射保持在同一位置，而不必在绘画或 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" >`

谢谢。

Answer 1

相反，

您可以做的是使用具有基于百分比的坐标和维度的绝对定位的div，并将您的点击事件挂接到这些坐标和维度中。这应该可以让您的隐形"按钮"与图像很好地缩放。图像映射有点过时，不是很灵活。

小提琴示例（使用正确/错误的函数更新）：

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%;
}

在小提琴中，我还更改了内联 Javascript 处理以使用事件处理程序，因为这些属性处理程序也已经过时了。

Answer 2

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

如果您遵循这个想法，并考虑使用zoom + javascript而不是mediaquerie来包含较旧的浏览器，例如IE，请注意某些版本的IE可以理解：transform：scale（x）; 和zoom：X; 确保在这种情况下不要重新调用两次。

基本上，坐标

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

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