图像映射无法在iOS设备上运行,大型图像会被设备重新调整

Question

我正在使用PHP在我们公司的Intranet上开发一个内部Web应用程序.应用程序的一部分向用户显示几个高分辨率图像.这些图像的面积为5000x3500像素.每个图像都有一个图像映射(使用矩形区域),并且在我尝试过的桌面浏览器中一切正常.

我发现的问题是,当用户通过他们的iOS设备访问网站时,图像将通过设备上的safari重新调整,但图像地图坐标不会被调整以匹配.

我的PHP生成的HTML示例如下:

<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,5000,500" href="blah1"/>
  <area shape="rect" coords="0,500,2500,3500" href="blah2"/>
  <area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>

(图像映射中的实际矩形坐标计算为图像大小的百分比).

我知道safari正在调整图像大小,因为设备上存在内存限制,但我需要找到一种缩放图像映射以适应的方法,或者用其他可以完成相同工作的其他东西替换图像映射.任何人都可以提供任何建议吗？

Answer 1

这个主题在stackoverflow上解决了:jquery-image-map-alternative

最好的想法是使用绝对定位的锚(也像steveax建议)而不是imagemap.

更新

由于这是一个老问题,您现在可能会考虑使用SVG地图.它们在所有现代浏览器中都受支持,响应性地工作,并且像图像映射一样易于使用.(感谢用户vladkras提醒)

Answer 2

为什么不改用响应式图像映射。通过这种方式，您仍然可以将多边形贴图用于形状奇特的项目。

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

就像添加脚本一样简单。还有一行 javascript：

$('img[usemap]').rwdImageMaps();