반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
}
</style>
</head>
<body>
<div id="container">
<img src="../images/egg.jpg" id="img">
</div>
</body>
</html>
<script>
let img = document.querySelector('#img');
img.addEventListener("mouseover",changeImg);
img.addEventListener("mouseout",changeImg2);
function changeImg() {
img.src="../images/chick.png";
}
function changeImg2() {
img.src="../images/egg.jpg";
}
</script>반응형
'Java Script' 카테고리의 다른 글
| [JS] media 쿼리 / 화면 사이즈에 따라 카드 구성 다르게 하기 (0) | 2023.04.13 |
|---|---|
| [JS] DOM - getElementsByTagName (0) | 2023.04.12 |
| [JS] 버튼클릭>함수호출>색 변경 (0) | 2023.04.12 |
| [JS] 초단위로 시간 변경 #setInterval (0) | 2023.04.12 |
| [JS] 팝업 #window.open (0) | 2023.04.12 |