실습문제 9-4
WEB/TRAINNING 2017. 12. 4. 09:19 |4. onmousemove를 이용하여 웹 페이지에 마우스가 움직일 때 이미지를 마우스 커서처럼 사용하도록 웹 페이지를 작성하라.
이미지는 가로 30픽셀, 세로 30픽셀 크기로 하라.
힌트)
이미지를 가진 <div> 블록을 만들고 절대 위치 display:absolute로 지정하고, document.onmousemove(혹은 window.onmousemove)에서 마우스의 위치를 따라 계속 <div> 위치를 변경하면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <title></title> <style> img { width: 30px; height: 30px; } </style> </head> <body> <h3>이미지 커서만들기</h3> <hr> 마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니다. <div id="div" style="position: absolute"> <img src="media/spongebob.png"> </div> <script> var div = document.getElementById("div"); window.onmousemove = function(e) { div.style.left = e.clientX + "px"; div.style.top = e.clientY + "px"; } </script> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title></title> <style> img { width: 30px; height: 30px; } </style> </head> <body> <h3>이미지 커서만들기</h3> <hr> 마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니다. <img id="img" style="position: absolute" src="media/spongebob.png"> <script> var img = document.getElementById("img"); window.onmousemove = function(e) { img.style.left = e.clientX + "px"; img.style.top = e.clientY + "px"; } </script> </body> </html> | cs |
