有没有办法调整图像大小并让图像映射保持在同一个地方？ (html/Javascript/CSS)答案

【问题标题】：is there a way to resize an image and have an image map stay in the same place? (html/Javascript/CSS)有没有办法调整图像大小并让图像映射保持在同一个地方？ (html/Javascript/CSS)
【发布时间】：2014-04-08 03:36:21
【问题描述】：

我目前正在制作一个旨在进行测试的网站。它有一个图像和一个图像映射，我正在尝试使用 JavaScript 来获取客户端屏幕大小并调整图像大小以适应客户端屏幕大小，但是当我这样做时，我不需要它。有没有办法让图像贴图保持在同一个地方，而不必在油漆或 Photoshop 中“物理地”调整图像大小。 My site（没有获取客户端的屏幕尺寸）。基本上我试图让图像适合他们的屏幕，以便更容易导航测试，它很逼真，但不会搞砸我的图像地图定位。任何 hep 将不胜感激。

    `<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" >`

谢谢。

【问题讨论】：

首先，只要我找到光标变为指针的位置，您就可以找到所有答案。其次，如果不发布一些代码，很难帮助您解决问题。
我认为您在调整图像大小时图像映射移动时不理解我的问题。有没有办法让它不动。
你可以做的是使用绝对定位的 div 和基于百分比的坐标和宽度，并将你的点击事件挂钩。图片地图有点过时了。
好的，谢谢，我会试试的
Making Hard-coded -dimensions with relative values reusable with area -map?, stackoverflow.com/questions/11363358/…的可能重复

标签： javascript html css image map

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您可以做的是使用具有基于百分比的坐标和尺寸的绝对定位的 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 处理更改为使用事件处理程序，因为这些属性处理程序也已过时。

【讨论】：