HTML의 onmousemove 이벤트를 사용해 JavaScript 함수를 호출한 뒤 이미지 태그의 아이디가 img1인 이미지 태그를 찾아 x,y 좌표의 css를 조정해 마치 마우스가 따라 다니는 이미지를 구현해본 소스 입니다.
<html>
<head>
<title>마우스를 따라 다니는 이미지</title>
<meta name="generator" content="note" />
<meta name="author" content="zzarungna" />
<style type="text/css">
#img1 { position:absolute; left:0px; top:0px; }
</style>
<script type="text/javascript">
function Test() {
document.getElementById("img1").style.left = (event.x - 64) + "px";
document.getElementById("img1").style.top = (event.y - 64) + "px";
}
</script>
</head>
<body onmousemove="Test();">
<img src="https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png" id="img1" />
</body>
</html>
위 소스코드를 복사하시고 파일 저장 확장자 형식은 html로 저장 하시면 마우스를 따라 다니는 짱구 이미지가 나오게 됩니다.
마우스를 따라 다니는 이미지와 관련한 소스 코드가 필요하신 분들은 간단히 활용 하시면 좋을 것 같습니다.