html - Rollover mouse to change picture -


i have 5 jpg's of eyes looking, left, right etc using html... want pictures change when mouse pointer @ left of picture eyes left , on. thought using coordinates find position of pointer, some, if statements change picture, work can't figure out.

here have far, on right lines?

function myfunction(e) {     var x = e.clientx;     var y = e.clienty;     var coor = "coordinates: (" + x + "," + y + ")";     document.getelementbyid("showcoor").innerhtml = coor; } 

<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 , handle each part     if(x < width/2){         img.src = "img1.png";     }     else{         img.src = "img2.png";     } } </script> 

Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -