将图像div划分为像素行并附加事件

Question

我有一个包含图像的div，它是一个垂直颜色栏。这就是我想要做的事：
将鼠标悬停在颜色栏的任何位置上时，文本窗口将跟踪鼠标，指示颜色栏的相应值。这是我为示范目的快速制作的图像：

我认为这样做的方法是将图像分成几行像素，然后将hover事件附加到每个像素行，然后我可以添加信息。 但是，我不知道该怎么做。

因此，如何将图像划分为一组像素行以向其添加事件，或者有更好的方法来执行此操作吗？

Answer 1

我有一个想法，但它有点复杂。现在我试着解释一下： 你需要重叠你的形象，一张看不见的桌子。 您的表必须有许多行，例如颜色变化的数量。在每一行中，您只需要一个单元格。 您可以使用循环来执行此表。 使用css，只需在所有单元格中分配相同的类，以便您可以管理所有单元格上的悬停。 告诉我，如果我不清楚

Answer 2

这需要一点努力。但首先，您可以使用html5 canvas属性并创建所需的渐变效果。

以下是我创建的演示：http://jsfiddle.net/manublueheart/XSWeK/

然后有一个关于为画布部分创建鼠标的教程，你需要在下面的代码中使用它。

看看这对你有帮助。

教程：http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

演示：http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,0,800);
grd.addColorStop(1,"blue");
grd.addColorStop(0,"green");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,200,600); 

Answer 3

你需要一个函数将鼠标指针的y-coord转换为相应的颜色，我在这里称之为getValueForPos（..）。

div.addEventListener('mousemove', function(e) {
  var yPos = parseInt(e.y - img.getBoundingClientRect().top);
  var colorValue = getValueForPos(yPos);
  // Do something with colorValue in a hover
});

Answer 4

难道你不能只使用mousemove事件并获取鼠标指针的坐标，然后将其与div标签的高度进行比较，你可以计算它的位置。然后将要在悬停时显示的信息存储在一个数组中，您可以根据div上的鼠标位置进行引用。如果没有太多的dom对象被创建，这将产生预期的效果。