마우스를 이미지 위로 가져갈 때 JavaScript를 사용하여 div 배경을 동적으로 변경합니다.

이 기사에서는 JavaScript를 사용하여 마우스 호버 이벤트를 수신하고 호버된 이미지 요소를 기반으로 div 요소의 배경 이미지를 동적으로 변경하는 방법을 소개하는 것을 목표로 합니다. 이 글을 통해 현재 마우스로 가리킨 이미지의 URL을 가져와서 대상 div 요소의 'BackgroundImage' 속성에 적용하여 동적 배경 전환 효과를 얻는 방법을 알아봅니다.

구현원리

핵심 아이디어는 JavaScript의 onmouseover 이벤트 리스너를 사용하여 마우스가 이미지 요소 위에 있을 때 함수를 트리거하는 것입니다. 이 함수는 현재 이미지의 src 속성을 가져와 대상 div 요소의 backgroundImage 속성에 할당합니다.

HTML 구조

먼저, 배경 컨테이너로 div 요소가 필요하고 트리거로 여러 img 요소가 필요합니다.

 <div id="이미지">
    여기에 표시하려면 아래 이미지 위로 마우스를 가져가세요.
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

이 예에서는 ID가 "image"인 div가 배경 컨테이너 역할을 합니다. 각 img 요소에는 onmouseover 및 onmouseout 속성이 있으며, 이는 마우스를 가리키거나 떠날 때 각각 트리거되는 JavaScript 함수를 지정하는 데 사용됩니다. upDate(this)는 현재 img 요소를 upDate 함수에 매개변수로 전달합니다. unDo() 함수는 나중에 구현할 기본 배경을 복원하는 데 사용됩니다.

자바스크립트 코드

다음으로, 동적 배경 전환을 구현하기 위한 JavaScript 코드를 작성해야 합니다.

 함수 upDate(previewPic){
    document.getElementById("image").style.BackgroundImage = `url('${previewPic.src}')`;
}

함수 취소() {
    document.getElementById("image").style.BackgroundImage = ""; // 배경 이미지 제거}

upDate 함수는 마우스가 가리키고 있는 현재 img 요소를 나타내는 매개변수 PreviewPic을 받습니다. 사진의 URL은 PreviewPic.src를 통해 얻을 수 있습니다. 그런 다음 document.getElementById("image").style.groundImage를 사용하여 div 요소의 배경 이미지를 설정합니다. 여기서는 템플릿 문자열(`url('${previewPic.src}')`)이 URL을 동적으로 구성하는 데 사용됩니다.

unDo 함수는 기본 배경을 복원하는 데 사용됩니다. 여기서는 간단히 backgroundImage를 빈 문자열로 설정합니다.

완전한 예

 


<title>동적 배경 변경</title>

#이미지 {
  너비: 300px;
  높이: 200px;
  테두리: 1px 단색 검정;
  여백 하단: 10px;
}

.미리보기 {
  너비: 100px;
  높이: 80px;
  오른쪽 여백: 5px;
  커서: 포인터; /* 마우스를 올리면 손 모양으로 나타나게 합니다*/
}




<div id="이미지">
    여기에 표시하려면 아래 이미지 위로 마우스를 가져가세요.
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">


함수 upDate(previewPic){
    document.getElementById("image").style.BackgroundImage = `url('${previewPic.src}')`;
}

함수 취소() {
    document.getElementById("image").style.BackgroundImage = "";
}

위 내용은 마우스를 이미지 위로 가져갈 때 JavaScript를 사용하여 div 배경을 동적으로 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!