Javascript 有没有办法自动生成伪图像地图？

Hitbox覆盖IIFE代码

//CSS Hitbox Solution 08-26-2015
//StackOverflow - https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//Detect MouseOver https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//Source: https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
(function($) {
  $.mlp = {
    x: 0,
    y: 0
  }; // Mouse Last Position
  function documentHandler() {
    var $current = this === document ? $(this) : $(this).contents();
    $current.mousemove(function(e) {
      jQuery.mlp = {
        x: e.pageX,
        y: e.pageY
      };
    });
    $current.find("iframe").load(documentHandler);
  }
  $(documentHandler);
  $.fn.ismouseover = function(overThis) {
    var result = false;
    this.eq(0).each(function() {
      var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
      var offset = $current.offset();
      result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
    });
    return result;
  };
})(jQuery);
$('.notification-box').on("click", function() {
  $("button").each(function(i) {
    var iteratedButton = $('button:eq(' + i + ')');
    var buttonID = iteratedButton.attr("id");
    if (iteratedButton.ismouseover()) {
      iteratedButton.toggleClass(buttonID);
    }
  });
});

//CSS Hitbox解决方案08-26-2015
//堆垛溢出-https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//检测鼠标悬停https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//资料来源：https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
（函数（$）{
$.mlp={
x:0,，
y:0
}；//鼠标最后位置
函数documentHandler（）{
var$current=this==document？$（this）：$（this.contents（）；
$current.mousemove（函数（e）{
jQuery.mlp={
x:e.pageX，
y:e.pageY
};
});
$current.find（“iframe”）.load（documentHandler）；
}
$（documentHandler）；
$.fn.ismouseover=函数（此函数）{
var结果=假；
此.eq（0）.each（函数（）中）{
var$current=$（this）.is（“iframe”）？$（this.contents（）.find（“body”）：$（this）；
var offset=$current.offset（）；
结果=offset.left$.mlp.x和offset.top$.mlp.y；
});
返回结果；
};
})（jQuery）；
$（'.notification box'）。打开（“单击”，函数（）{
$（“按钮”）。每个（功能（i）{
var iteratedButton=$（'button:eq（'+i+'））；
var buttonID=iteratedButton.attr（“id”）；
if（iteratedButton.ismouseover（））{
iteratedButton.toggleClass（buttonID）；
}
});
});

-源自stackoverflow问题

有一种方法可以使多个对象位于遮罩它们的覆盖之下。然后，如果用户在预定点单击，则存在一种使指针与所述覆盖下的元素交互的方法。我的问题是，是否有人可以编写这样的代码，将

标记的概念与iLife结合起来，iLife可以检测用户单击的参考点是否是该图像，然后就好像它被单击一样

如果这没有意义，简单地说，我正在寻找一个偏离手动设置

坐标的过程。相反，我们会让指针完成所有的工作

我们有以下高实用性+高度兼容的方法：
.offset（）
，
.position（）
，
elementFromPoint（）
，并且能够利用基本CSS将元素放在掩码后面

因此，我们可以结合上面的IIFE覆盖hitbox方法+？？=利润（通过
再见映射坐标）

我只是不知道那是什么？？？？是我知道无论解决方案是什么，我都希望它能在所有浏览器（包括IE 5）中运行

最后，这个过程在设计、设置和实现上应该是相当自动化的

无论是谁创建的，请将其命名为autoMapperJs（因为它不限于图像）

更新：

？？？的核心功能组件？？？？如@Alex在评论中所述，已实现。当指针悬停在图像的非透明区域上时注意。这是强大的，应该是创建的工具中的标准。它似乎还利用了
.mousemove（）
和
z-index
。请继续评论，作为一个整体，我觉得可以找到解决方案。
这是一个开始。将图像放入画布上的一系列层和位置中，然后在鼠标上方进行浏览，以便点击。还可以在图层阵列中放置图像，以便在点击时绘制该图像


var can=document.getElementById（'image-map'）；
var W=罐宽；
var H=罐高；
var ctx=can.getContext（'2d'）；
var层=[]；
变量鼠标={x:0，y:0}；
can.addEventListener（'mousemove'，函数（evt）{
鼠标=getMousePos（can，evt）；
画布（）；
}，假）；
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
main（）；
函数main（）{
initLayers（）；
画布（）；
}
函数drawCanvas（）{
ctx.clearRect（0，0，W，H）；
var-hit=-1；
对于（var i=layers.length；i--；）{
var c=层[i]；
if（马斯基特（c.img，c.x，c.y））{
hit=i；
打破
}
}
对于（变量i=0；iimg.width | | y>img.height）返回false；
//返回1；//方形命中，无alpha检查
//ALPHA检查-绘制一个像素，获取并检查ALPHA。
//sx sy sw sh dx dy dw dh
maskCtx.clearRect（0,0,1,1）；
maskCtx.drawImage（img，x，y，1，1，0，0，1，1）；
var imageData=maskCtx.getImageData（0,0,1,1）；
//console.log（imageData.data[3]）
返回imageData.data[3]==255；
}