Mouseover action на изображении

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] + ')'; 

Answer 1

Я думаю, что вы ищете что-то вроде this

Это из другого question