Menu

TOP Notice Topic Cord self-introduction Guide Lines

Manage

Login
Cord > Study_Web 전체 다운로드
파일 목록
Study_Web > 이후/practic9-4.html Lines 33 | 976 바이트
다운로드 

                        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let cursor;
        function makeCursor() {
            cursor = document.getElementById("cursor");

            cursor.style.zIndex = 100;

            document.onmousmove = function (e) {
                cursor.style.left = event.clientX + "px";   // 단위 "px" 필수
                cursor.style.top = event.clientY + "px";
            }
        }
    </script>
</head>

<body onload="makeCursor()">
    <h3>이미지 커서 만들기</h3>
    <p id="P"> 마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니다.</p>
    <div id="cursor" style="position:absolute;">
        <img src="media/apple.jpg" width="30px" height="30px">
    </div>

</body>

</html>