세로형
Notice
Recent Posts
Recent Comments
Link
11-25 00:03
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover) 본문

javascript

자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover)

이수진의 블로그 2017. 8. 21. 08:52
반응형
728x170
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>이미지갤러리</title>
</head>
<style>
    
    #imgGallery{
        border: 3px solid orange;
        width: 300px;
        overflow: hidden
    }
    
    #imgGallery img{
        width: 300px;
    }
    
    #smallImgs img{
        float:left;
        width: 100px;
    }
    
    hr{
        margin: 0;
        padding: 0;
        size:5px;
    }
    
    
</style>
 
<script>
    window.onload = function(){
        var big = document.getElementById('bigImg');   //위에 div 객체 생성하고
        var smallImgs = document.getElementById('smallImgs');
        
        //div 객체 아래에 있는 태그값 등을 가지고 올 수 있다.!
        var bigImg = big.getElementsByTagName('img')[0];  //tag는 컬렉션(배열) 처럼 같고온다.
        var smallImgThumb = smallImgs.getElementsByTagName('img'); //배열리턴

        for(var i = 0 ; i < smallImgThumb.length ; i++){
            
            smallImgThumb[i].onmouseover = function(){
                bigImg.src = this.src;
            }
        }
        
    }
    
</script>
 
<body>
   
   <div id="imgGallery">
       
       <div id="bigImg">
           <img src="../images/1.PNG" id="a">    
       </div>
       <hr>
       <div id="smallImgs">
           <img src="../images/1.PNG">    
           <img src="../images/2.PNG">    
           <img src="../images/3.PNG">  
           
       </div>
   </div>
    
</body>
</html>
Colored by Color Scripter
cs

여기서 
var big = document.getElementById('bigImg'); 
var smallImgs = document.getElementById('smallImgs');
var bigImg = big.getElementsByTagName('img')[0];  //tag는 컬렉션(배열) 처럼 같고온다.
      var smallImgThumb = smallImgs.getElementsByTagName('img'); //배열리턴
의 차이점을 중요하게 보면 된다.

getElementById는 딱 1개의 값을 가지고 온다. 그래서 컬렉션(배열)과 같이 가져오지 않는다.

하지만 getElementsByClassName과 getElementsByTagName은 배열로 해당 클래스 DOM값들과 태그 값들을 가지고 온다.

그래서 본래는 배열로 접근해야 한다. 하지만 위에처럼 첫번째 img에만 접근하려면 [0] 인덱스로 바로 접근해서 객체를 가지고 오면 된다.

그게 아니라면 반복문을 돌면서 객체를 참조해야 한다.

위 결과는

 



 



마우스 오버시 변경되는 것을 볼 수 있다.



반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 구구단 출력해보기  (0) 2017.08.22
자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경  (0) 2017.08.21
자바스크립트로 간단한 퍼즐게임 만들기  (5) 2017.08.21
자바스크립트 Math  (0) 2017.08.16
자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환  (0) 2017.08.16
공유하기 링크
'javascript' Related Articles more
Comments