有一个活动页面有10张图拼成的一张大图。。
原图宽是640和加起来一共的高是3661
我在原有的图上做热点区域.
然后如何放到不同分辨率下的屏幕点击区域还是一样的呢?
是图片不是背景图. 图片是max-width:100%;height:auto;
实现这样的功能真是够蛋疼的。在移动端来说,使用svg是更好的选择,它天生支持缩放,也可以在对象上绑定事件,不用考虑上面的问题的。
但如果真要做这样功能也是可行的。可以保存原始图片尺寸,再获得当前图片尺寸,再对热区域进行比例缩放就可以了。图片的热点一般都用的<map></map>,取出里面的<area/>,再使用jquery操作一下DOM应该可以的啊。
结果不搞热点了 . 还要每个去计算比例..
a标签定位了宽百分比.
高的话按position:absolute;top:0;bottom:0; 撑起来的.