반응형
자바스크립트
마우스 이벤트 알아보기
다양한 이벤트 기능 중에서 마우스 관련 이벤트에 대하여 알아보도록 하겠습니다.
onMouseOver 이벤트
- 특정한 링크 또는 영역에 마우스 포인터가 위치하게 될 때 동작이 발생 하게 됩니다.
형식
<A HREF="링크URL" onMouseOver="마우스가 링크URL영역에 접근 했을 때 실행시킬 함수 또는 명령“>
링크 텍스트 또는 링크 이미지
</A>
onMouseOut 이벤트
- 특정한 링크 또는 영역에 마우스 포인터가 벗어나게 될 때 동작이 발생 하게 됩니다.
형식
<A HREF="링크URL" onMouseOut ="마우스가 링크URL영역을 벗어나게 될 때 실행시킬 함수 또는 명령“>
링크 텍스트 또는 링크 이미지
</A>
이벤트 처리기를 이용하여 마우스 포인터의 위치에 따라 이미지를 교체 하는 예제 입니다.
왼쪽 E-Run 즐거움 아래 동그란 이미를 확인 해 보세요
예제소스
<DIV onMouseOver="document.images[0].src='https://t1.daumcdn.net/cfile/tistory/99CD683C5A5F5D6C05'"onMouseOut="document.images[0].src='https://t1.daumcdn.net/cfile/tistory/997DE83F5A5F5D9C30';">
마우스를 올려 주세요 ^^
</DIV>
결과확인
마우스를 올려 주세요 ^^
이미지가 변경되는 것을 확인 할 있을 것 입니다.
반응형
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
자바스크립트 confirm 함수 예제 (0) | 2018.01.23 |
---|---|
자바스크립트 대화상자 - alert() confirm() prompt() (0) | 2018.01.20 |
[자바스크립트] 웹 브라우저에 정의된 객체에 대하여 알아보자 (4) | 2018.01.16 |
자바스크립트를 이용한 HTML 문서 작성 방법 (2) | 2018.01.15 |
자바스크립트(JavaScript)란 무엇인가? (6) | 2018.01.14 |