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
Post a Comment