鼠标悬停在图像上的动作

Question

我在“公司价值”部分有这个网页dvsantos.com。我有一种“人”，“客户”和其他人的圈子......

我需要的是，当我将鼠标移到圆圈中的其中一个部分上时，它旁边的文本会发生变化，我正在尝试使用画布进行颜色识别，但它无法正常工作一些计算机和一些分辨率。

我对这里使用的内容缺乏想法。

我基本上是用这个：

$(function() {

var canvas = document.getElementById('canvas1');

var img = new Image();
img.src = '../wp-content/uploads/2016/07/dvs_img5-1.png';



var ctx = canvas.getContext('2d');
img.onload = function() {
ctx.canvas.width  = img.width ; 
ctx.canvas.height = img.height; 
ctx.drawImage(img, 0, 0 ,img.width,img.height);
img.style.display = 'none';

};




 var color = document.getElementById('color');
 function pick(event) {


var pos = findPos(canvas);
var x = event.pageX - pos.x;
var y = event.pageY - pos.y;




   var pixel = ctx.getImageData(x, y, 1,1);
   var pixelData = pixel.data;

   var rgba = 'rgba(' + pixelData[0] + ',' + pixelData[1] +
              ',' + pixelData[2] + ',' + pixelData[3] + ')';