翻轉鼠標改變圖片

我有一個五個JPG的眼睛看，左，右等使用HTML ...我想圖片改變，所以當鼠標指針在圖片的左側，眼睛向左看所以上。我認爲使用座標來查找指針的位置，然後一些，如果語句改變圖片，將工作，但我無法弄清楚。翻轉鼠標改變圖片

這是我到目前爲止，我在正確的路線？

function myFunction(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
    var coor = "Coordinates: (" + x + "," + y + ")"; 
    document.getElementById("showCoor").innerHTML = coor; 
}

來源

2017-08-15 Thomas Horsted

您是在正確的軌道上或多或少，但它不是真正清楚你尋找什麼。你想讓我們爲你寫代碼還是你有特定的問題？ – CWBudde

那麼爲什麼5具體呢？如果你有屏幕和指南針的中心點，我可以看到5個圖像。如果光標位於頁面的NE部分，您是否只想查找？需要更多解釋5 /你想要/需要什麼。 – JGFMK

我不需要使用我試圖寫的任何代碼......我可以用解決問題的方法來完成。我希望它看起來像是在屏幕上跟隨鼠標的眼睛的圖片。我有一箇中心，左，右，上下的圖片，但我無法解決網頁的代碼問題。任何幫助都會很棒。 –

<img src="img0.png" id="img" onmousemove="myFunction()"> 
<p id="showCoor"></p> 
<script> 
function myFunction() { 
    var x = event.clientX; 
    var y = event.clientY; 
    var img = document.getElementById("img"); 
    var width = img.width; 
    var height = img.height; 
    var coor = "Coordinates: (" + x + "," + y + ")"; 
    document.getElementById("showCoor").innerHTML = coor; 
    // Divide image in parts and handle each part 
    if(x < width/2){ 
     img.src = "img1.png"; 
    } 
    else{ 
     img.src = "img2.png"; 
    } 
} 
</script>

來源

2017-08-15 09:42:49 sspathare97

謝謝，薩加爾，我已經試過這個，但是我無法得到它的工作，我認爲我之前編寫的代碼是不正確的。可能需要重新開始。我對此仍然很陌生，並感謝您的幫助。 –

翻轉鼠標改變圖片

回答

相關問題