[JavaScript] Image

VScode/JavaScript 2022. 9. 8. 17:54

getElementById

-자바스크립트에서 바디 안의 id 셀렉터 값을 지목하는 방법

-document.getElementById("아이디값")

onmouseover

-해당 태그에 마우스 포인터가 올라가면 일어나는 이벤트

onmouseout

-해당 태그에서 마우스 포인터가 밖으로 벗어나면 일어나는 이벤트

1. 마우스로 이미지 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image01.html</title>
    <script type="text/javascript">
        function changeImageg01(){
            document.getElementById("img1").src="images/5.jpg";
        } // 마우스를 올리면 변하는 이미지 
        function changeImage02(){
            document.getElementById("img1").src="images/1.jpg";
        } // 마우스가 이미지에서 벗어나면 나타나는 이미지
        function changeImage03(){
            document.getElementById("img1").src="images/3.jpg";
        } // 마우스로 클릭하면 변하는 이미지
    </script>
</head>
<body>
    <img src="images/1.jpg" id="img1" onclick="changeImage03();" 
     onmouseover="changeImageg01();" onmouseout="changeImage02();" 
    />
</body>
</html>

2. 이미지 이름 입력받아서 이미지 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image02.html</title>
    <script type="text/javascript">
// 그림을 클릭하면 숫자하나를 입력 받아서 
// "숫자.jpg" 파일로 그림을 바꾸는 코드를 완성
        function change01(){
            var number=prompt('number(1~10)','1');
            var filename="images/"+number+".jpg";
            document.getElementById("target").src=filename;
        }
    </script>
</head>
<body>
    <img src="images/1.jpg" id="target" onclick="change01();" />
</body></html>

3. 마우스 클릭으로 지정된 범위까지 이미지 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image03.html</title>
    <script type="text/javascript">
// 클릭하면 이미지가 지정한 범위까지 순서대로 변함
        var imgNum=1; 
        function changeImg(){    
            imgNum++;
            if(imgNum>10) imgNum=1; 
// 이미지 번호가 10 이후에는 1.jpg로 돌아감
            document.getElementById("target").src="images/"+imgNum
                                                   +".jpg";
        }
    </script>
</head>
<body>
    <img src="images/1.jpg" id="target" onclick="changeImg();"/>
</body>
</html>

4. 지정된 범위까지 자동으로 이미지 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image04.html</title>
    <script type="text/javascript">
        // 1초에 한번씩 다음 이미지로 바뀌게 코딩. 그림은 1.jpg~10.jpg까지
        var imgNum=1;
        window.setInterval(function changeImg(){    
            imgNum++;
            if(imgNum>10) imgNum=1;
            document.getElementById("target").src="images/"+imgNum+".jpg";
        },1000);
    </script>
</head>
<body>
    <img src="images/1.jpg" id="target">    
</body>
</html>

5. clearInterval()

-함수를 종료시키는 명령어

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image05.html</title>
    <script type="text/javascript">
        var imgNum=1;
        var timer;
        function start(){
// timer 변수로 멈출 명령을 정의함
            timer=window.setInterval(function(){    
            imgNum++;
            if(imgNum>10) imgNum=1;
            document.getElementById("target").src="images/"+imgNum
                                                  +".jpg";
            },1000);
        }
        function stop(){
            window.clearInterval(timer)
        }
    </script>
</head>
<body onload="start();"> // 창을 실행시킬 때부터 start() 함수가 시작됨
    <img src="images/1.jpg" id="target" onmouseover="stop();" 
     onmouseout="start();" >  
// 이미지에 마우스를 올리면 변화하던 이미지가 멈춤
</body>
</html>

6. 마우스로 함수 2개를 실행/정지 번갈아 시키기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image06.html</title>
    <style type="text/css">
        #a1{position:absolute; width:170px; height:255px; 
            border:2px solid black; top:100px;}
    </style>
    <script type="text/javascript">
// 한개의 타이머는 시계방향으로 0.5초마다 20도씩 회전하는 동작
// 또 한개의 타이머는 반시계방향으로 0.5초마다 20도씩 회전하는 동작 
// onMouseOver와 onMouseOut 이벤트에 연결하여 코딩
        var aa=0;
        var timer1, timer2;
        function clockwise(){
            window.clearInterval(timer2);
            timer1=window.setInterval(function(){    
            aa+=20;
            document.getElementById("a1").style.webkitTransform=
                                      'rotate('+aa+'deg)';},500);
        }
        function counterclockwise(){
            window.clearInterval(timer1);
            timer2=window.setInterval(function(){    
            aa-=20;
            document.getElementById("a1").style.webkitTransform= 
                                      'rotate('+aa+'deg)';},500);
        }
    </script>
</head>
<body onload="clockwise();">
    <div id="a1" onmouseout="clockwise();"  
             onMouseOver="counterclockwise();">
        <img src="images/1.jpg" >  
    </div>
</body>
</html>

css style을 이용한 이미지 슬라이드 제작하기

1. 마우스 클릭으로 다음 이미지 넘기기

-document.getElementById("").style.left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll01.html</title>
    <style type="text/css">
        #view{position:relative; width:170px; height:255px; 
              border:3px solid blue; left:100px; overflow:hidden;}
// view: 이미지가 나타날 id
// overflow: hidden으로 설정하여 #imgs가 지정된 범위를 제외하고 안 보임
        #imgs{position:absolute; width:850px; height:255px; 
              border:1px dashed red; transition: 0.2s;}
// imgs: 이미지를 이어 붙인 id
    </style>
    <script type="text/javascript">
        var imgNum=0; 
// 이동 거리 계산 때문에 초기값은 1보단 0으로 하는게 좋음
        function moveImg(){
            imgNum++;
            if(imgNum>4) imgNum=0;
            var dist=imgNum*170*(-1);
// 왼쪽으로 이미지 크기(170px)만큼 이동함
            document.getElementById("imgs").style.left=dist+"px";
        }
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs" onclick="moveImg();">
            <img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg">
// 이미지를 이어서 써야 float 명령으로 일렬로 출력됨 
        </div>
    </div>
</body>
</html>

2. 이미지 위에 마우스 올리면 정지, 마우스가 이미지에서 벗어나면 실행

-document.getElementById("").style.left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll02.html</title>
    <style type="text/css">
        #view{position:relative; width:170px; height:255px; 
              border:3px solid blue; left:100px; overflow:hidden;}
        #imgs{position:absolute; width:850px; height:255px; 
              left:0; border:1px dashed red; transition: 0.2s;}
    </style>
    <script type="text/javascript">
// 타이머를 이용해서 시작부터 자동으로 움직이게 하되 
// 마우스가 올라가면 멈추고 마우스가 빠져나가면 다시 움직임
        var timer;
        var imgNum=0; 
// 이동 거리 계산 때문에 초기값은 1보단 0으로 하는게 좋음
        function moveImg(){
            timer=window.setInterval(function(){
                imgNum++;
                if(imgNum>4) imgNum=0;
                var dist=imgNum*170*(-1);
                document.getElementById("imgs").style.left=dist+"px";
            },1000);
        }
        function stop(){
            window.clearInterval(timer);
        }
    </script>
</head>
<body onLoad="moveImg();">
    <div id="view" onmouseout="moveImg();" onmouseover="stop();">
        <div id="imgs" >
            <img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"> 
        </div>
    </div>
</body>
</html>

3. 투명도 이용해서 이미지 슬라이드 만들기

-document.getElementById('').style.opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll03.html</title>
    <style type="text/css">
        #view{position:relative; width:170px; height:255px;
              border:1px solid blue; left:100px;}
        .imgs{position:absolute; top:0; left:0; opacity:0; 
              transition:1s;}
        .imgs:first-child{opacity:1;}
// 처음에 나타나는 이미지는 투명도 1로 하여 선명하게 나타나게 함
    </style>
    <script type="text/javascript">
        var imgNum=1;
        window.setInterval(function(){
// document.getElementById("imgs"+imgNum).style.opacity='0';
            for(var i=1; i<=5; i++)
                document.getElementById("imgs"+i).style.opacity='0';
// 현재 화면에 보여야할 이미지가 나오기 전에 모든 이미지 투명으로
            imgNum++;
            if(imgNum>5) imgNum=1;
            document.getElementById("imgs"+imgNum).style.opacity='1';
        },1000);
    </script>
</head>
<body>
    <div id="view">
        <div class="imgs" id="imgs1"><img src="images/1.jpg"></div>
        <div class="imgs" id="imgs2"><img src="images/2.jpg"></div>
        <div class="imgs" id="imgs3"><img src="images/3.jpg"></div>
        <div class="imgs" id="imgs4"><img src="images/4.jpg"></div>
        <div class="imgs" id="imgs5"><img src="images/5.jpg"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll04.html</title>
    <style type="text/css">
        #view{position:relative; width:170px; height:255px; 
              border:1px solid blue; left:100px;}
        .imgs{position:absolute; top:0; left:0; opacity:0;
              transition:1s;}
        .imgs:first-child{opacity:1;}
    </style>
    <script type="text/javascript">
// 순서대로 fadein 하되 마우스가 올라가면 멈춤, 나가면 다시 시작하게 코딩
        var timer;
        var imgNum=1;
        function moveImg(){
            timer=window.setInterval(function(){
                document.getElementById("imgs"+imgNum).style.opacity='0';
                imgNum++;
                if(imgNum>5) imgNum=1;
                document.getElementById("imgs"+imgNum).style.opacity='1';
            },1000);
        }
        function stop(){
            window.clearInterval(timer);
        }
    </script>
</head>
<body onload="moveImg">
    <div id="view" onmouseout="moveImg();" onmouseover="stop();">
        <div class="imgs" id="imgs1"><img src="images/1.jpg"></div>
        <div class="imgs" id="imgs2"><img src="images/2.jpg"></div>
        <div class="imgs" id="imgs3"><img src="images/3.jpg"></div>
        <div class="imgs" id="imgs4"><img src="images/4.jpg"></div>
        <div class="imgs" id="imgs5"><img src="images/5.jpg"></div>
    </div>
</body>
</html>

4. transform 이용하기

-document.getElementById("").style.webkitTransform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll05.html</title>
    <style type="text/css">
        ul{list-style:none; margin:0; padding:0;}
        ul li{position:relative; float:left; padding:0; 
              margin:0px; overflow:hidden;}
        .caption{position:absolute; width:300px; height:200px; 
                 top:200px; background:black; opacity:0.7; 
                 transition:0.5s;}
        .caption h1, .caption p{color:white; text-align:center;}
    </style>
    <script type="text/javascript">
        function caption_up(x){
            document.getElementById("cap"+x).style.webkitTransform=
                                               "translateY(-200px)";
        } // 마우스를 이미지에 올리면 id cap이 올라옴
        function caption_down(x){
            document.getElementById("cap"+x).style.webkitTransform=
                                               "translateY(+200px)";
        } // 마우스가 이미지에서 벗어나면 id cap 내려감
    </script>
</head>
<body>
    <ul>
        <li onmouseover="caption_up(1)" onmouseout="caption_down(1)">
            <img src="images/prod1.jpg">
            <div class="caption" id="cap1">
                <h1>상품1</h1><p>상품1:설명텍스트</p><p>가격:12,234원</p>    
            </div>
        </li>
        <li onmouseover="caption_up(2)" onmouseout="caption_down(2)">
            <img src="images/prod2.jpg">
            <div class="caption" id="cap2">
                <h1>상품2</h1><p>상품2:설명텍스트</p><p>가격:12,234원</p>    
            </div>
        </li>
        <li onmouseover="caption_up(3)" onmouseout="caption_down(3)">
            <img src="images/prod3.jpg">
            <div class="caption" id="cap3">
                <h1>상품3</h1><p>상품3:설명텍스트</p><p>가격:12,234원</p>    
            </div>
        </li>
    </ul>
</body>
</html>

5. 버튼 아이콘을 만들어 지정된 이미지로 이동하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll06.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; 
          margin:0 auto; border:1px dashed black; overflow:hidden;}
        #imgs{position:absolute; width:4800px; height:400px; 
            left:0; top:0; border:1px dashed red; transition:0.3s;}
        img{width:600px; height:400px;}
        #remote{position:relative; width:200px; height:50px;
                border:1px solid white; margin:0 auto; top:350px;
                text-align: center;}
        ul{list-style:none; padding:0; margin:0; 
           display:inline-block;}
        ul li{float:left; width:14px; height:14px; 
            background:white; border-radius: 50%; margin:18px 4px;}
    </style>
    <script type="text/javascript">
// style의 left값을 이용해서 각 버튼에 맞는 이미지가 화면에 
// 나타나도록 코딩
        function move(x){    
            document.getElementById("imgs").style.left=(-1)*600*(x-1)+"px";
        }
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"  id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="remote">
            <ul>
                <li onclick="move(1)"></li>
                <li onclick="move(2)"></li>
                <li onclick="move(3)"></li>
                <li onclick="move(4)"></li>
                <li onclick="move(5)"></li>
                <li onclick="move(6)"></li>
                <li onclick="move(7)"></li>
                <li onclick="move(8)"></li>
            </ul>
        </div>
    </div>
</body>
</html>

6. 좌우 버튼을 생성하여 이미지 넘기기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll07.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; 
         margin:0 auto; border:1px dashed black; overflow: hidden;}
        #imgs{position:absolute; width:4800px; height:400px; 
           left:0; top:0; border:1px dashed red; transition:0.3s;}
        img{width:600px; height:400px;}
        #lbutton{position:absolute; left:0; bottom:0; width:50px;
                 height:50px; border-radius:50%; overflow:hidden; 
                 background-image:url("images/ico_movie_171115.png");
                 background-position:-60px -460px;}
        #rbutton{position:absolute; right:0; bottom:0; width:50px; 
                 height:50px; border-radius:50%; overflow:hidden; 
                 background-image:url("images/ico_movie_171115.png");
                 background-position:0px -460px;}
    </style>
    <script type="text/javascript">
        var imgNum=0;
        function moveleft(){    
            if(imgNum==0) return; // end function
            imgNum--;
            document.getElementById("imgs").style.left=imgNum*(-1)*600+"px";
        }
        function moveright(){    
            if(imgNum==7) return; // end function
            imgNum++;
            document.getElementById("imgs").style.left=imgNum*(-1)*600+"px";
        }
        function move(x){
            if(x==-1&&imgNum==0)return;
            else if(x==1&&imgNum==7) return;
            else if(x==-1&&imgNum>0) imgNum--;
            else if(x==1&&imgNum<7) imgNum++;
            document.getElementById("imgs").style.left=imgNum*-600+"px";
        }
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"  id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="lbutton" onclick="move(-1);"></div>
        <div id="rbutton" onclick="move(1);"></div>
    </div>
</body>
</html>

7. 시작/정지 버튼을 생성하여 이미지 넘기기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll08.html</title>
    <style type="text/css">
        #view{ position:relative; width:600px; height:400px;
         margin:0 auto; border:1px dashed black; overflow: hidden;}
        #imgs{ position:absolute; width:4800px; height:400px;
        left:0px; top:0; border:1px dashed red; transition: 0.3s; }
        img{ width:600px; height:400px; }
        #remot{ position:relative; width:200px; height:50px;
                border:1px solid white; margin:0 auto; top:350px; 
                text-align: center;}
        #remot ul{ list-style:none; margin:0; padding:0; 
                   display:inline-block;}
        #remot ul li{ float:left; width:25px; height:25px; 
                      background:white; border-radius: 50%; 
                      margin:13px 10px; line-height:25px; 
                      text-align:center; cursor: pointer;}
    </style>
    <script type="text/javascript">
// play : 이미지를 한장씩 1초 또는 2초마다 넘기며 보여줌
// 이미지의 끝(7번)에 다다르면 맨 처음 이미지로 이동. 
// stop : 이미지 자동  rolling 을 멈춤. 
// 이미지 롤링은 페이지 시작시 동작하면서 시작하게 작성
        var imgNum=0;
        var timer;
        function play(){
            timer = window.setInterval(function(){
                imgNum++;
                if(imgNum>7)imgNum=0;
                var dist = -600*imgNum;
                document.getElementById("imgs").style.left = dist + 'px';
            }, 1500);
        }
        function stop(){
            window.clearInterval(timer);
        }
    </script>
</head>
<body  onload="play()">
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"><img src="images/Chrysanthemum.jpg"><img src="images/Desert.jpg"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="remot">
            <ul>
                <li onClick="play()">▶</li>
                <li onClick="stop()">■</li>
            </ul>
        </div>
    </div>
</body>
</html>

8. 시작/정지 버튼 번갈아가며 나타나게 함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll09.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; 
        margin:0 auto; border:1px dashed black; overflow:hidden;}
        #imgs{position:absolute; width:4800px; height:400px; 
          left:0; top:0; border:1px dashed red; transition:0.3s;}
        img{width:600px; height:400px;}
        #remote{position:relative; width:200px; height:50px; 
               border:1px solid white; margin:0 auto; top:350px; }
        #remote div{position:relative; width:25px; height:25px; 
                    background:white; border-radius: 50%; 
                    line-height:25px; text-align: center; 
                    cursor:pointer; margin:13px auto;}
    </style>
    <script type="text/javascript">
        var imgNum=0;
        var timer;
        var state=false; 
// 현재 플레이 상태인지, 멈춤상태인지 저장할 변수
        // document.getElementById("btn").innerHTML='■';
        // document.getElementById("btn").innerHTML='▶';
        function play_stop(){
            if(state==true){
// 현재 플레이중(버튼에 '■'가 표시되어 있는 중 버튼 클릭)
// -> 동작은 멈추고 버튼 표시는 '▶'로 전환
                state=false;
                window.clearInterval(timer);
                document.getElementById("btn").innerHTML='▶';
            } else{ 
// 현재 멈춰있는 중(버튼에 '▶'가 표시되어 있는 중 버튼 클릭)
// -> 동작은 멈추고 버튼 표시는 '■'로 전환
                state=true;
                document.getElementById("btn").innerHTML='■';
                timer=window.setInterval(function(){
                    imgNum++;
                    if(imgNum>7) imgNum=0;
                    document.getElementById("imgs").style.left=imgNum*-600+"px";
                },1000);
            }
        }
    </script>
</head>
<body onload="play_stop()">
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"  id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="remote">
            <div id="btn" onclick="play_stop()">■</div>
        </div>
    </div>
</body>
</html>

저작자표시

'VScode > JavaScript' 카테고리의 다른 글

[JavaScript] DOM (0)	2022.09.09
[JavaScript] vaildation, select tag, visibility, check (0)	2022.09.08
[JavaScript] BOM (0)	2022.09.08
[JavaScript] function (0)	2022.09.08
[JavaScript] if, loop (0)	2022.09.08

ABOUT ME

im hippo im hippo

'VScode > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'VScode > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바