자바스크립트
[JS] 마우스 올렸다 뗐을 때 이미지 바꾸기
도하루박
2022. 9. 29. 16:46
반응형
html 태그 안에서 스크립트 언어를 사용해 보았다.
처음 이미지는 별에서 마우스는 하트로 변하는 효과를 주었다. 또 마우스는 뗄 때에는 별 이미지를 다시 주었다.
여기서
onmouseover : 마우스를 올릴 때
onmouseout : 마우스를 뗄 때
<body>
<h3>마우스를 올려보세요.</h3>
<hr>
<img src="img/s1.png" onmouseover="this.src='img/h1.png'" onmouseout="this.src='img/s1.png'">
</body>
이것을 응용하여 배경색 변경의 효과도 줄 수 있다.
초반 배경색은 흰색이지만 마우스를 올렸을 때 색을 바꿀수도 있다.
<body>
<h3>마우스를 올려주세요</h3>
<hr> <!-- 실선 -->
<div onmouseover="body.style.background='yellow'" onmouseout="body.style.background='red'">
클릭!
</div>
</body>
반응형