하루의 일상💜

[JS] 마우스 올렸다 뗐을 때 이미지 바꾸기 본문

자바스크립트

[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>

 

반응형
저작자표시

'자바스크립트' 카테고리의 다른 글

[자바스크립트] 문자열 함수, 포함여부 includes(), split(), substring(), ===  (1) 2022.10.06
[자바스크립트] forEach(), indexOf(), map(), filter()  (0) 2022.10.06
[자바스크립트] Array 선언과 push(), join(), slice()  (0) 2022.10.06
[자바스크립트] math를 이용한 구구단 연습 만들기  (0) 2022.10.06
[자바스크립트] HTML 요소 입 출력 /prompt, confirm, alert  (0) 2022.10.02
'자바스크립트' Related Articles more