业余结了一个小单子,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()// 改变图片的srcimg.src = img_url// 加载完成执行img.onload = function(){ // 打印 var cuWidth = document.body.clientWidth ; var cp = cuWidth / img.width ; console.log("cp:"+cp); console.log( document.body.clientWidth ); for (var i = 0; i < defaultMaps.length; i++) { for (var n = 0; n < defaultMaps[i].length; n++) { console.log(defaultMaps[i][n]); defaultMaps[i][n] = defaultMaps[i][n] * cp; console.log(defaultMaps[i][n]); } areas[i].setAttribute('coords',defaultMaps[i]); }};