Programming/JavaScript

[JavaScript] img src를 반복문, 조건문을 이용해서 변경하기

송요시 2019. 3. 12. 17:09

JavaScript로 img src를 변경하기



오늘은 JavaScript로 img src를 변경해볼텐데요.

저는 HTML로 작성한 코드에서 img안에 들어갈 내용(src)을 사용자의 접속 지역에 따라서 다르게 표현하고 싶었답니다. 그래서 어떠한 방식으로 하면 좋을까? 하다가 for, if문을 사용해서 간단하게 구현해보았습니다 :)



제 HTML 코드를 전부 살펴보지 않고, 오늘 딱 해볼 <img> 태그가 있는 위치만 살펴보도록 하겠습니다!


1
2
3
4
<div>
    <img src=""> // 로고 이미지
    <img src=""> // 이름 이미지
</div>
cs


아주 간단하게 img 태그 2개를 넣었습니다. 저는 각 시/도의 로고와 이름의 이미지를 받아오려고 합니다.

제가 만약 서울시에서 들어오면 서울시의 로고와 이름이 이미지로 나오게끔 말이죠. 

( 저는 가입할때 지역 코드를 받아오도록 했고, 그 지역 코드를 session값으로 갖고 로그인 할 수 있도록 했습니다. 회원가입, 로그인하는 예제는 다음 포스팅에 업로드하도록 할게요 )

저는 전국 17개 시/도의 CI를 미리 원하는 경로에 맞게 저장을 했고 서울은 1_logo.png, 1_title.png 그리고 부산은 2_logo.png, 2_title.png와 같은 모습으로 지역코드와 logo인지, title인지 구별하여 저장해놓은 상태입니다.


그렇다면 이제 위의 코드를 조금 손봐야하는데요.

먼저, img의 id를 지정한 후, script 태그에서 이 id를 가져와 원하는 이벤트(함수)를 하도록 해줘야합니다.


1
2
3
4
5
6
7
<div>
   <img id="logo" src="">
       <script>document.getElementById('logo').src=logo_info()</script>
                   
   <img id="title" src="">
       <script>document.getElementById('title').src=title_info()</script>
 </div>
cs
ㅇㅇㅇㅇㅇ

이와 같이 내가 지정한 id값을 가져오고 src로 logo_info()와 title_info(), 각자 함수를 실행하도록 해줍니다.

그럼 이제 저 logo_info()와 title_info()를 지정해줘서 어떤 이미지를 가져와야하는지 설정해줍니다.


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
<script language="javascript">
 
        function logo_info() {
            var user_area = <%=user.area%>;
            var img_src;
            for(var i=1; i<=17; i++) {
                if(user_area == i) {
                img_src = '../public/img/'+ i + '_logo.png';
                }
            }
            return img_src;
        }
 
        function title_info() {
            var user_area = <%=user.area%>;
            var img_src;
            for(var i=1; i<=17; i++) {
                if(user_area == i) {
                img_src = '../public/img/'+ i + '_title.png';
                }
            }
            return img_src;
        }
 
</script>
 
 
<div>
   <img id="logo" src="">
       <script>document.getElementById('logo').src=logo_info()</script>
                   
   <img id="title" src="">
       <script>document.getElementById('title').src=title_info()</script>
 </div>
cs


기존의 코드에서 script만 따로 추가해준 코드입니다!

여기서 각자 logo_info(), title_info()는 다른 이미지의 경로를 참조하고 있습니다.

( 제가 하는 프로젝트의 코드를 그대로 사용하고 있는거라 으잉 저 user_area는 뭐지? 하실 수 있지만 그냥 무시해주시기 바랍니당...ㅎㅎ 차차 전부 업로드해야겠어요 )

user_area (사용자의 접속 지역) 가 1인 경우에는 서울(지역코드 1)의 CI를, 2는 부산(지역코드 2)의 CI를 보여줄 수 있도록 for문으로 1~17개가 돌아갈 수 있도록 설정해준 뒤, if문으로 user_area가 1이면 1의 이미지를 2면 2의 이미지를 src로 받도록 했습니다!


  1. <img> 태그에서 id를 지정한다.

  2. <script> 태그에서 지정한 id를 getElementById로 가져온다.

  3. 2번에서 가져온 값의 .src를 원하는 함수로 지정한다.

  4. function () {}을 이용하여 원하는 함수 코드를 작성한다,

  5. 문자열과 객체는 서로 +로 연결시킨다.

  6. 원하는 값을 return 한다.


조금이나마 도움이 되셨나요?

아마 너무나 간단하고 쉬운 예제라 뭔가 싶으실거에요 ㅎㅎ

그럼 오늘 포스팅은 이것으로 마치도록 하겠습니다~ 다음 포스팅에서 더 유익한 정보로 만나효 (๑>◡<๑)