버튼 스칠 때 마다 사진 바꾸기

07 Nov 2020 in Programming on JavaScript

◇ JS 실습 포스팅 시리즈 ◇

1. 입력 데이터 출력 실습
2. n초 마다 사진 바꾸기
3. 버튼위에 마우스 올려 사진 바꾸기 - 현재 글
4. 버튼위에 마우스 올려 사진 바꾸기2
5. 자식창에서 부모창 정보 수정 하기
6. 야식 주문 프로그램 만들기

---

JS_HO2랑 비슷하다. 이번엔 자동이 아닌, 버튼 위에 마우스가 스칠 때 마다 사진이 바뀌게 한다.

HTML

요번 HTML 는 좀 복잡하다. data-* 라는 새로운 개념도 나온다.

• data-* 는 HTML의 모든 요소와 사용할 수 있는 Global Attribute이다.

• onmouseover 를 사용하면, a태그 위에 마우스가 올려질 때 이벤트를 발생시킬 수 있다.

• onmouseover= “함수(this);” 이렇게 전달되면, js에서 args 로 해당하는 HTML 태그가 전달된다! (이 코드에서는 a태그 객체가 전달된다.)

  

• 1번태그에 마우스가 올려지면, replace(this);가 실행된다. 여기서 this는 1번태그다.

  2번 태그에 마우스가 올려지면 this는 2번태그를 반환하고,

  3번 태그에 마우스가 올려지면 this는 3번 태그를 반환하고,

  4번 태그에 마우스가 올려지면 this는 4번 태그를 반환한다.

  js에서 이 정보를 토대로 어떤 태그가 반응했는지 알게되고, 그에 맞는 작업을 수행하게 된다.

<img id= "target" src = "dog1.jpg">
<div class="wrapper">

    <!--1번 태그-->
    <a href="#" data-img="dog1.jpg" onmouseover="replace(this);">갱얼쥐1</a>&nbsp;

    <!--2번 태그-->
    <a href="#" data-img ="dog2.jpg" onmouseover ="replace(this);">갱얼쥐2</a>&nbsp;

    <!--3번 태그-->
    <a href="#" data-img ="dog3.jpg" onmouseover ="replace(this);">갱얼쥐3</a>&nbsp;

    <!--4번 태그-->
    <a href="#" data-img ="dog4.jpg" onmouseover ="replace(this);">갱얼쥐4</a>&nbsp;

Javascript

• 반환된 a태그 객체에서 getAttribute(“data-img”);를 하면 html 태그에서 data-img 를 통해 전달한 인자가 반환된다.
• 따라서 그걸로 css에 접근해서 배경을 바꿀 수 있다.

function replace(aTag) {
    var clicked = aTag.getAttribute("data-img");
    var target  = document.getElementById("target");
    target.setAttribute("src", clicked);
}

CSS

css는 여기서 별로 안 중요하다. 어쨋든 그렇다

div.wrapper {
   width :  800px;
   height : 600px;
   margin : 0 auto;
   text-align: center;
}
img{
  display: block;
  margin: 0 auto;
  width: 600px;
  height :  400px;
}