Documentation/03_Exercises/03_JavaScript/javascript-basics-02/step 6/step_6.js at 3490485d89eed3e6efacbd3c3aa1db83b497f049 · coditech/Documentation · GitHub

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
document.addEventListener('DOMContentLoaded', init);
function init(){
    const img1=document.querySelector("#image1");
    const img2=document.querySelector("#image2");
    const img3=document.querySelector("#image3");
    const img4=document.querySelector("#image4");
    const img5=document.querySelector("#image5");
    changeImg(img1);
    changeImg(img2);
    changeImg(img3);
    changeImg(img4);
    changeImg(img5);
    function changeImg(image){
        if(image.id==img1.id){
            image.onmouseover=() =>{
                    img1.src="images/image1_2.jpg";
            };
            image.onmouseout=() =>{
                img1.src="images/image1.jpg";
            };
        }
        else if(image.id==img2.id){
            image.onmouseover=() =>{
                    img2.src="images/image2_2.jpg";
            };
            image.onmouseout=() =>{
                img2.src="images/image2.jpg";
            };
        }
        else if(image.id==img3.id){
            image.onmouseover=() =>{
                img3.src="images/image3_2.jpg";
            };
            image.onmouseout=() =>{
                img3.src="images/image3.jpg";
            };
        }
        else if(image.id==img4.id){
            image.onmouseover=() =>{
                img4.src="images/image4_2.jpg";
            };
            image.onmouseout=() =>{
                img4.src="images/image4.jpg";
            };
        }
        else if(image.id==img5.id){
            image.onmouseover=() =>{
                img5.src="images/image5_2.jpg";
            };
            image.onmouseout=() =>{
                img5.src="images/image5.jpg";
            };
        }
    }
}