[JavaScript] Content 조작(2) 응용버전

WEB/JavaScript

[JavaScript] Content 조작(2) 응용버전

developer of the night sky 2023. 10. 10. 14:13

🔻마우스 클릭하여 이미지 생성하기🔻

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tbl1 {
            border: 1px solid gray;
            border-collapse: collapse;
        }

        #tbl1 td {
            border: 1px solid gray;
            width: 126px;
            height: 126px;
        }

        #tbl1 td img {
            display: block;
        }

    </style>

</head>
<body oncontextmenu="return false;">
    
    <table id="tbl1">
        <!-- tr*5>td*5 -->
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

테이블에 이벤트 추가

    <script>
        // <td> 25개에 이벤트 추가
        var list = document.getElementsByTagName('td');

        for (var i=0; i<list.length; i++) {
            list[i].onmousedown = m2;
        }

        function m2() {
            var n=0;

            if (event.buttons ==1) {
                n=1;
            } else if(event.buttons ==2) {
                n=2;
            } else if(event.buttons ==4) {
                n=3;
            }

            event.target.innerHTML = '<img src="../asset/images/rect_icon0'+ n +'.png">'
        }

    </script>

마우스 좌 클릭, 우 클릭, 휠 클릭 마다 다른 이미지가 생성된다.

🔻클릭한 썸네일을 하단에 출력하기 & 한번에 삭제하기🔻

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #sample {
            border: 1px solid black;
            background-color: #eee;
            padding: 20px;
            width: 800px;
            text-align: center;
        }

        #sample .pic {
            width: 150px;
            border-radius: 10px;
            opacity: .3;
            cursor: pointer;
        }

        #sample .pic:hover {
            opacity: 1;
        }

    </style>

</head>
<body>
    
    <div id="sample">
        <img src="../asset/images/cat01.jpg" class="pic">
        <img src="../asset/images/cat02.jpg" class="pic">
        <img src="../asset/images/cat03.jpg" class="pic">
        <img src="../asset/images/cat04.jpg" class="pic">
        <img src="../asset/images/cat05.jpg" class="pic">
        <img src="../asset/images/dog01.jpg" class="pic">
        <img src="../asset/images/dog02.jpg" class="pic">
        <img src="../asset/images/dog03.jpg" class="pic">
        <img src="../asset/images/dog04.jpg" class="pic">
        <img src="../asset/images/dog05.jpg" class="pic">
    </div>
    <hr>
    <input type="button" value="삭제하기" id="btn1">
    <hr>
    <div id="output"></div>

</body>
</html>

하단에 출력하기

    <script>
        var pic = document.getElementsByClassName('pic');
		
        //사진마다 onclick 이벤트 등록하기
        for (var i=0; i<pic.length; i++) {
            pic[i].onclick = m1;
        }

        function m1() {
            //클릭한 <img>확인
            //alert(event.target.src);

            var url = event.target.src;
            var filename = url.substring(url.lastIndexOf('/')+1);
            //alert(filename);

            document.getElementById('output').innerHTML += '<img src="../asset/images/'+ filename + '">';

        }

    </script>

한번에 삭제하기

    <script>
        document.getElementById('btn1').onclick = m2;
        
        function m2() {
            if (document.getElementById('output').innerHTML != ''){
                if (confirm('정말 삭제하시겠습니까?')){
                    document.getElementById('output').innerHTML='';
                }
            }
        }
    </script>

사용자에게 값을 입력받아 확인을 받으면 삭제한다.

저작자표시 (새창열림)