이 게시물은 JavaScript에서 호버 이미지를 변경하는 절차를 보여줍니다.
JavaScript에서 호버 이미지를 변경하는 방법은 무엇입니까?
마우스 오버 이미지를 변경하려면 ' onmouseover ' 이벤트. 마우스/커서가 HTML 요소 또는 그 자식 중 하나를 통해 이동하면 onmouseover 이벤트가 트리거됩니다.
예제 1: JavaScript에서 Hover 이미지 변경
HTML 파일에서 태그를 사용하여 웹 페이지에 이미지를 표시합니다. '를 첨부합니다. onmouseover ” 마우스가 이미지 위에 있을 때 JavaScript 함수를 호출하는 이벤트:
< 이미지 아이디 = '메뉴이미지' 소스 = '1.jpg' onmouseover = '호버(이);' />
JavaScript 파일에서 ' 호버링 ' 매개변수 ' 이미지 '. 정의된 함수에서 호버에 표시될 이미지를 설정합니다.
기능 호버링 ( 이미지 )
{
이미지. 소스 = '2.jpg'
}
보시다시피 출력에서 현재 이미지 위로 마우스를 가져가면 갑자기 변경됩니다.
예제 2: 호버에서 이미지 토글
위의 예에서 마우스를 이미지 위로 가져가면 이미지가 변경되고 동일한 이미지가 유지됩니다. 이제 이 예에서는 마우스가 이미지 밖으로 이동하면 첫 번째 이미지가 다시 나타납니다. 이 효과를 토글 효과라고 합니다. 이를 위해 ' onmouseover ' 그리고 ' 온마우스아웃 ” HTML 속성:
< 이미지 아이디 = '메뉴이미지' 소스 = '1.jpg' onmouseover = '호버(이);' 온마우스아웃 = 'hoverOut(이)' />
“ onmouseover ' 호출 ' 호버() ' 기능 동안 ' 온마우스아웃 ” 이벤트는 함수를 호출합니다 “ hoverOut() ”:
기능 hoverOut ( 이미지 ) {이미지. 소스 = '1.jpg'
}
출력은 마우스가 이미지 위에 있을 때 이미지가 성공적으로 변경되고 마우스가 이미지 밖으로 나갈 때 변경됨을 보여줍니다.
그것은 호버에서 변화하는 이미지에 관한 것입니다.
결론
마우스 오버 시 이미지를 변경하려면 ' onmouseover ' 이벤트. 효과를 전환하려면 ' onmouseover ” 속성에 “ 온마우스아웃 ' 이벤트. 마우스/커서가 요소 또는 그 자식 중 하나를 통해 이동하면 onmouseover 이벤트가 트리거되고 마우스/포인터가 요소 밖으로 이동하면 onmouseout 이벤트가 발생합니다. 이번 포스팅에서는 자바스크립트에서 hover 이미지를 변경하는 과정을 시연했습니다.