본문 바로가기
프로그래밍/HTML, CSS, JavaScript

자바스크립트 - 마우스 이벤트 예제

by [바가지] 2018. 1. 17.
반응형

자바스크립트

마우스 이벤트 알아보기

 

마우스이벤트

 

 

다양한 이벤트 기능 중에서 마우스 관련 이벤트에 대하여 알아보도록 하겠습니다.

 

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>

 

 

결과확인 

 

마우스를 올려 주세요 ^^

 

이미지가 변경되는 것을 확인 할 있을 것 입니다.

반응형