Hello World...

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>

 

'javascript' 카테고리의 다른 글

await setTimeout  (0) 2023.07.14
axios params -> fetch query  (0) 2020.07.21
html, css, javascript 모달창 만들기  (0) 2020.05.13
javaScript Promise 헷갈리는 점 추가  (0) 2020.02.05
es6 promise 예제 만들어보기  (0) 2020.02.04
'javascript' Related Articles more
Comments