javascript - 手机移动端活动页面如何做热点且自适应啊?

Question

有一个活动页面有10张图拼成的一张大图。。

原图宽是640和加起来一共的高是3661

我在原有的图上做热点区域.

然后如何放到不同分辨率下的屏幕点击区域还是一样的呢?

是图片不是背景图. 图片是max-width:100%;height:auto;

Answer 1

实现这样的功能真是够蛋疼的。在移动端来说，使用svg是更好的选择，它天生支持缩放，也可以在对象上绑定事件，不用考虑上面的问题的。
但如果真要做这样功能也是可行的。可以保存原始图片尺寸，再获得当前图片尺寸，再对热区域进行比例缩放就可以了。图片的热点一般都用的<map></map>，取出里面的<area/>,再使用jquery操作一下DOM应该可以的啊。

Answer 2

结果不搞热点了 . 还要每个去计算比例..
a标签定位了宽百分比.
高的话按position:absolute;top:0;bottom:0; 撑起来的.