Question

我有五个jpg的眼睛看，左，右等使用HTML ...我希望图片改变，所以当鼠标指针位于图片的左侧时，眼睛向左看，依此类推。我想用坐标来找到指针的位置，然后一些if语句可以改变图片，但是我无法弄明白。

这是我到目前为止的情况，我是否在正确的位置？

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

Answer 1

<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>

翻转鼠标来改变图片

1 个答案: