html MAp coords 自适应热点图片宽度定位

最新推荐文章于 2023-05-17 15:45:55 发布

yf_d

最新推荐文章于 2023-05-17 15:45:55 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript笔记文章标签：自适应热点图 coords

本文链接：https://blog.youkuaiyun.com/u010913414/article/details/88870722

版权

通过JavaScript解决HTML地图区域coords在图片宽度变化时的自适应问题，避免因图片宽度超过视窗导致的坐标错位。利用图片原始宽度与视窗宽度的比例，动态调整area元素的coords属性，保持热点图的正确定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业余结了一个小单子，html的作业，但是需要用DW做热点图，电脑也没有那玩意，就用淘宝热点图做了。后来发现图片比我屏幕还宽，body出现了滚动轴，如果改成百分比，热点图就错位了。于是就用js控制了。

图片加载前获取图片的原始宽度，这个时候，算出视窗宽度与图片宽度的比例Cp。

用dom查询area节点，获取coord属性。

每个属性乘上CP比例。

再setAttribute就好了。

代码：注意这列将图片宽度设置为100%！important。

   //全图状态下定位
var defaultMaps = [
    [585,170,787,239],
    [212,172,351,238],
    [1031,174,1230,245],
    [798,173,1026,244],
    [1238,172,1426,242],
    [1439,173,1635,241]

];
var areas = document.querySelectorAll('area');
for (var m = 0; m < areas.length; m++) {
    areas[m]
}
console.log(areas[0].coords);
console.log(areas.length);
// 图片地址
var img_url = '关于.png'

// 创建对象
var img = new Image()

// 改变图片的src
img.src = img_url

// 加载完成执行
img.onload = function(){
    // 打印
    var cuWidth =  document.body.clientWidth