圖像上的鼠標懸停操作

我在網頁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] + ')';

來源

2016-07-05 Alfonso Mora De la Calle

我不知道多久，或者如果你」爲此要找到一個好的解決方案（請記住，即使你的圈子區域有3種顏色：圖標，背景，文本），但如果這不適合你，你應該將圖像部分轉換爲div並將其用作觸發器。 –

但我該如何保持圖像的形狀？ –

那麼，你需要一些複雜的CSS。這一切都取決於你花多少時間在這上面花費的時間，我只是說如果你很匆忙，你可以去尋找一些更簡單的東西，比如簡單的彩色div。 –

我認爲你正在尋找的東西像this

這是從另一個question

來源

2016-07-05 14:18:14

這可能適用於該情景，但我有一個圖像。不是div –

我不認爲他是，實際上。他並沒有在div上徘徊（這很容易做到），但img的真實部分並不像圓圈或長方形那樣有規律的恥辱。 –

哦，但我感謝你應該使用一些jQuery來解決這個問題 –

圖像上的鼠標懸停操作

回答

相關問題