자바스크립트로 이미지 변경하기

 자바스크립트를 활용해서 이미지를 변경하는 3가지 방법에 대해 살펴본다.

엘리먼트 노드의 속성 변경하기 - 첫번째 방법

•   숫자를 입력하면 지정한 이미지가 출력된다.

     각 이미지를 변수에 담아 이미지 소스에 링크하는 단순하지만 손이 많이 가는 방법 

      
changeButton.onclick = function(){
  let no = srcInput.value;
if(no==1){img.src=`https://blog.kakaocdn.net/dna/omqpa/btqI6OjdlKv/AAAAAAAAAAAAAAAAAAAAAPQg5PlJU9QVoZ5-EC0G0-Am5-QtGeXQCLfHapXft4IM/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=lssyNdw56FWPfgYhTn7gly9rjDs%3D
       }  else if(no == 2){
       img.src=`https://blog.kakaocdn.net/dna/IdwvU/btqI9F0BuQD/AAAAAAAAAAAAAAAAAAAAAKIPvQ9ylykprtRBdzUAfOK0MUivQyp4PAb_jes5TQZW/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=xi6%2BVaVf79m3F1GaMv7L6PWbpFU%3D
       }  else if(no == 3){
       img.src=`https://blog.kakaocdn.net/dna/SnbQs/btqI9n6wDGu/AAAAAAAAAAAAAAAAAAAAAEaz0PqsoVzfuof3xfYYh0e8AVLNxSF51lpbJsplvgQv/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=F0PAbMe%2Fc%2FXl3kd%2BWlztpwG8B%2B8%3D
       } else if(no == 4){
       img.src=`https://blog.kakaocdn.net/dna/KghHD/btqJij9Qlzf/AAAAAAAAAAAAAAAAAAAAAKto4_4Ao9HacUzvOiDv86rkR89Dt1ixKVzNCHbxy9Bl/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=3Al6%2F3AYcs81kD8xz1reDAR4I%2Bk%3D
       } else if(no == 5){
       img.src=`https://blog.kakaocdn.net/dna/MXHLL/btqJizdLucJ/AAAAAAAAAAAAAAAAAAAAANIx_aX6Ei96WRKdVVKDduOnwz_8_WHr5tjGKiTHT_Xc/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=RsYGOe%2F77qRvdJPWoWR9ftb%2BRIQ%3D
       } else{
       img.src=`https://blog.kakaocdn.net/dna/b36jWS/btqI7yf93SC/AAAAAAAAAAAAAAAAAAAAAN846zP9K5P-M_--EltBvnsEvYCMuuIL56Z533Uv_Kyl/img.jpg%60;?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=6hFM9byH7EbP5KhpDj%2BXkGi7NAI%3D
     }
  }
    

---

엘리먼트 노드의 속성 변경하기 - 두번째 방법

•  옵션을 선택하면 이미지가 바뀐다.

book book1 book2 book3 book4 book5

 

selct의 옵션 value 값을 활용하는 방법 - 가장 무난한 방법
   
         changeButton2.onclick = function(){
                img2.src=`${imgSelect2.value}`;
        }
    

---

엘리먼트 노드의 속성 변경하기 - 세번째 방법

•  인풋창에서 원하는 이미지 주소를 선택하면 이미지가 바뀐다. 

html5에서 추가된 datalist 태그를 활용하는 방법 

    datalist id값과  input list 값을 동일하게 지정함 

    라벨 for와 인풋 id 값을 일치하는 것과 유사함

    하지만 인풋에서 필터링한 값으로 인해 추가로 이미지를 바꿀 때, 인풋 값을 수동으로 삭제해야 함

    따라서 두번째 방법이 코드도 짧고 활용도 쉬워 무난한 듯...
   
        html에서
       input class="src-input3" list="img-list" type="text" /
	   datalist id="img-list"
         스크립트는 두번째 방법과 동일함
         changeButton3.onclick = function(){   
          img3.src=`${srcInput3.value}`
          srcInput3.value = ''
          }
     

---

 

자바스크립트로 스타일 변경하기