onmouseover & onmouseout 로 이미지 변경하기

javascript

onmouseover & onmouseout 로 이미지 변경하기

FaustK 2020. 12. 4. 09:11

갈색 잎 이미지에 마우스를 올리면 초록색으로 변경된다 ^^

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>잎바꾸기</title>
</head>
<body>

<h1>onmouseover & onmouseout</h1>
<img src="./leaf_brown.svg" alt="갈색잎">
<img src="./leaf_green.svg" alt="초록잎">
<h3>왼쪽 이미지에 마우스가 올라가면 오른쪽 초록색 이미지로 변경되게 해보자</h3>
<hr />

<img
  onmouseover="changeGreen(this)"
  onmouseout="changeBrown(this)"
  src="./leaf_brown.svg"
  alt="갈색초록색변경"
/>

<script>
  function changeGreen(leaf) {
    leaf.setAttribute('src', './leaf_green.svg');
  }

  function changeBrown(leaf) {
    leaf.setAttribute('src', './leaf_brown.svg');
  }
</script>
</body>
</html>