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

Question

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

    `<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，并将您的点击事件挂接到这些 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 处理以使用事件处理程序，因为那些属性处理程序也已过时。