map 热点area如何做到自适应啊.

有一张全屏的背景图是1920px. 要在上面加几个可点击区域链接.当然想到的是map. area来做吧

可问题来了 如何做到在不同像素的显示器做到可点区域取值正确啊 ?

百度查到说是用js拿到现在的innerWidth然后除以你之前定义好像素;

var resutl = current.innerrWidth/1920;
area.coords * result;

这样的话取值还是不太正确.有偏差

阅读 4.8k
2 个回答

图片描述

是这个意思不?
background肯定不是自适应宽度的吧? 这1920px里面也不会在两边留黑的地方(如图示意)有内容可点击吧?
假定一个红色区域,比如宽1000px,只需要注意一下分辨率或者窗口尺寸宽度不足的时候调整一下左偏移值就可以了,红色relative, 蓝色可点击区域absolute这样不就可以找好位置么?

话说现在怎么还有这么奇葩的需求- - 整个一张背景图上面找地方做可点击热点,不考虑hover或者active时候的变化么。。

======================
内容主体宽度是固定的吧?

背景上内容主体部分加相对定位,然后可点击部分用绝对定位控制就OK。

新手上路,请多包涵

js完成加载时遍历所有热点,然后重新赋值,就这样

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题