겉바속촉

[html] 사진변환 본문

IT일기(하반기)/HTML

[html] 사진변환

겉바속촉 2020. 6. 12. 16:49
728x90
반응형

이번에는 우리가 이미지 파일 4개를 가지고 와서

작업을 해보도록 할게요:)

 

우선 <body>블럭 사이에다가 div를 만들어줄게요:)

 

 

그리고 컴파일 해보시면

눈에 보이는 것은 아무것도 없을 거에요:)

 

 

 

그래서 윗 부분에 css로 style 작성해주세요!!

 

 

 

그리고 다음과 같이 스크립트문까지 완성해주시면

끝입니다!!

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style type="text/css">
   .test{
      width: 100px;
      height: 100px;
   }
   
   .result{
      width: 300px;
      height: 300px
   }
   
   #result_div{
      position: absolute;
      left: 500px;
      top: 300px;
      width: 300px;
      height: 350px;
      
   }
</style>

<script type="text/javascript">
   
   window.onload = function(){
      var img = [document.getElementById("img1"),
               document.getElementById("img2"),   
               document.getElementById("img3"), 
               document.getElementById("img4")];
      
      
      for(var i = 0 ; i < img.length ; i++){
         console.log(img[i]);
         console.log(img[i].getAttribute("src"));
         img[i].onclick = function(){
            img5.setAttribute("src",this.getAttribute("src"));
         }
      }
      
      
      
   }
   
   
   

</script>
</head>
<body>
   <div>
      <img alt="" src="../img/1.png" id="img1" class="test">
      <img alt="" src="../img/2.png" id="img2" class="test">
      <img alt="" src="../img/3.png" id="img3" class="test">
      <img alt="" src="../img/4.png" id="img4" class="test">
      
   </div>
   
   
   <div id="result_div">
      <img alt="" src="../img/1.png" id="img5" class="result">
   </div>
</body>
</html>

 

컴파일 해보시면

다음과 같이 디저트 4가지 이미지가 나오는 데요:)

 

각각 이미지를 클릭해보시면 ----> onclick 행위

아래 div 위치에 클릭한 이미지가 뜹니다 ----> window.onload = function이 작동

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] table 행, 열 합치기  (0) 2020.06.16
[html] table 생성하기  (0) 2020.06.16
[html]데이터보내기  (0) 2020.06.12
[html] 간단한 게임만들기  (0) 2020.06.12
[html] Array test  (0) 2020.06.12
'IT일기(하반기)/HTML' Related Articles more