세로형
Recent Posts
Recent Comments
Link
03-29 03:47
«   2024/03   »
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
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

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

javascript

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

이수진의 블로그 2017. 8. 21. 08:52
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

여기서 
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] 인덱스로 바로 접근해서 객체를 가지고 오면 된다.

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

위 결과는

 



 



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



반응형
그리드형
Comments