我目前正在制作一个旨在进行测试的网站。它有一个图像和一个图像映射,我正在尝试使用 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" >`
谢谢。
最佳答案
您可以改为使用具有基于百分比的坐标和尺寸的绝对定位的 div,并将您的点击事件挂接到这些 div 中。这应该允许你的隐形“按钮”与图像很好地缩放。图像映射有点过时且不太灵活。
fiddle 示例(更新了正确/错误的函数):
示例新的 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 处理以使用事件处理程序,因为那些属性处理程序也已过时。
关于javascript - 有没有办法调整图像大小并让图像映射保持在同一个地方? (html/Javascript/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22208583/