[jQuery] 웹페이지에서 이미지를 클릭하면 다른 이미지로 변경되게 하기(img1->img2->img1->img2->...)

프로그래밍/웹코딩|2020. 5. 14. 21:01| bskyvision 심교훈

자바스크립트(javascript)는 웹페이지에 생동감을 불어주는 언어입니다. 정적이여서 다소 식상할 수 있는 웹페이지를 동적으로 만들어 줄 수 있죠. 각 프로그래밍 언어마다 이런저런 유용한 기능을 구현해놓은 라이브러리가 있듯이, 자바스크립트도 이러한 라이브러리를 가지고 있습니다. jQuery가 그 중 하나입니다.

 

오늘은 jQuery를 이용해서 이미지를 클릭할 때마다 다른 이미지로 변경되는 코드를 소개해드리도록 하겠습니다. 구체적으로 말해서, 이미지를 클릭하면 다른 이미지로 바뀌고, 그 다른 이미지를 클릭하면 다시 원래 이미지로 변경됩니다. img1 -> img2 -> img1 -> img2 -> img1 -> ...

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>아래 사진을 클릭해보세요!</h2>
    <img id="img1" src="1.jpg" style="width:80%;">
    <img id="img2" src="2.jpg" style="width:80%;">    
</body>
 
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
 
<script>
    $(document).ready(function(){
            /*웹페이지 열었을 때*/
            $("#img1").show();
            $("#img2").hide();
 
            /*img1을 클릭했을 때 img2를 보여줌*/
            $("#img1").click(function(){
                $("#img1").hide();
                $("#img2").show();
            });
 
            /*img2를 클릭했을 때 img1을 보여줌*/
            $("#img2").click(function(){
                $("#img1").show();
                $("#img2").hide();
            });
        });
</script>
 
</html>
cs

 

이 코드를 이용해서 만든 웹페이지는 다음과 같이 작동합니다. 이미지를 여러 차례 클릭해보겠습니다.  

 

 

이미지를 클릭할 때마다 잘 변환되는 것을 확인할 수 있습니다. 컬러 사진에서 흑백 사진으로, 흑백 사진에서 컬러 사진으로, 컬러 사진에서 흑백 사진으로, ...

 

직접해보셨나요? 잘 되시던가요? ㅎㅎ 끝까지 읽어주심에 감사드립니다.^^ 

 

 

<참고자료>

[1] https://opentutorials.org/course/48, 생활코딩, "JavaScript"