마우스가 들어오고 나갈 때 그림을 전환하기 위한 onmouseover 및 onmouseout의 여러 구현 방법

이 글에서는 마우스가 들어오고 나갈 때 그림을 전환하는 onmouseover 및 onmouseout의 여러 구현 방법을 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

마우스를 안팎으로 움직여 사진을 전환하는 것은 매우 흔한 일이므로 구현 방법에 대해 이야기해 보겠습니다.

첫 번째 방법은 가장 간단한 방법이기도 하며 HTML로 구현할 수 있습니다

<img class="img" src="img/dongtai.png" onmouseover="this.src=&#39;img/HBuilder.png&#39;" onmouseout="this.src=&#39;img/dongtai.png&#39;"/>

첫 번째 기본값은 그림을 누른 다음 그림을 쓰는 동안 그림을 안팎으로 이동합니다.

두 번째 방법, js 교체

<img name="image1" src="img/dongtai.png" onmouseover="mouseOver()" onmouseout="mouseOut()" />

function mouseOver() {
	document.image1.src = "img/HBuilder.png"
}

function mouseOut() {
	document.image1.src = "img/dongtai.png"
}

이미지를 바꾸는 방법을 js에 작성하고 html로 호출합니다.

onmouseover와 onmouseout을 사용하지 않으면 이렇게 쓸 수도 있습니다

<p class="bg"></p>

.bg{background: url(img/HBuilder.png) no-repeat;height: 300px;}
.bg:hover{background: url(img/dongtai.png) no-repeat;}

이 세 가지 방법을 사용하면 사진에서 마우스를 왔다갔다하는 효과를 얻을 수 있습니다. 아주 간단하지 않나요?

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

JavaScript 그래픽 튜토리얼

JavaScript 온라인 매뉴얼

위 내용은 마우스가 들어오고 나갈 때 그림을 전환하기 위한 onmouseover 및 onmouseout의 여러 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!