html热点 位置不低,热点图 页面缩放不改变位置

文章时间：2019年5月29日 23:42:02

解决问题：热点图 随着页面的缩放比例而不改变其所在的位置

推荐画图工具：Adobe Dreamweaver CC

头部我们需要3个东西，请直接复制即可

直接复制这段代码然后用设计模式画图就行了。

任意地方加这段js代码。

$("img[usemap]").each(function () {

var img = $(this);

var newImg = new Image();

newImg.onload = function () {

$("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {

var val = $(this).attr("coords").split(",");

for (var i in val) {

val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);

newImg.width;

}

$(this).attr("coords", val.join(","));

})

};

newImg.src = img.attr("src");

});

全部完整版代码如下：(可直接复制使用)

页面标题

$("img[usemap]").each(function () {

var img = $(this);

var newImg = new Image();

newImg.onload = function () {

$("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {

var val = $(this).attr("coords").split(",");

for (var i in val) {

val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);

newImg.width;

}

$(this).attr("coords", val.join(","));

})

};

newImg.src = img.attr("src");

});