我有五个jpg的眼睛看,左,右等使用HTML ...我希望图片改变,所以当鼠标指针位于图片的左侧时,眼睛向左看,依此类推。我想用坐标来找到指针的位置,然后一些if语句可以改变图片,但是我无法弄明白。
这是我到目前为止的情况,我是否在正确的位置?
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("showCoor").innerHTML = coor;
}
答案 0 :(得分:0)
<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>