JavaScript에서 마우스를 가져갈 때 이미지 변경
Anika Tabassum Era
2023년10월12일
JavaScript에서 우리는 마우스 호버에서 이미지를 변경하는 작업을 수행하기 위해 일부 특정 코드 블록 또는 메서드를 따릅니다. 오히려 효율적인 방법은 이미지 소스를 고려하고 마우스 호버 효과와 협력하는 사용자 정의 함수를 만드는 것입니다.
예제 세트는 HTML 속성 onmouseout 및 onmouseover를 사용하여 스크립트 세그먼트에서 특정 기능을 트리거하는 하나의 데모를 볼 것입니다. 또한 두 번째 경우에는 jQuery와 관련된 .hover() 함수가 있습니다.
명확한 개념을 위해 코드 베이스를 확인합시다.
HTML 속성 onmouseover 및 onmouseout을 사용하여 함수 실행
핵심 작동 원리는 onmouseover 및 onmouseout을 기반으로 합니다. 그리고 이러한 속성은 마우스 오버 시 이미지를 변경하는 설명이 있는 함수에 매핑됩니다.
.attr()이 있는 jQuery에 의존하게 되므로 함수를 작동하려면 jQuery CDN이 필요합니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
<a href="#" id="home">
<img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
</a>
</div>
function onHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}
function offHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}
출력:
.hover() 메서드를 사용하여 호버에서 이미지 변경
이 예제는 img 클래스 home을 처리하는 jQuery 방식을 보여줍니다. 이미지 소스에 대해 클래스를 초기화한 다음 필요에 따라 함수를 생성합니다.
이전 것과 다른 점은 여기서는 HTML 속성을 사용하지 않았다는 것입니다. 오히려 명확하게 작동하는 .hover() 메서드에 의존했습니다.
코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div>
<img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
});
});
</script>
</body>
</html>
출력:
-Method-to-Change-Image-on-Hover.webp)
