JAVASCRIPT STEP 23 - 응용 예제2

★ 문제 1

• 아래와 같은 문서를 생성하시오.
• 조건
  • 롤 오버 이미지를 구현하시오.
  • 고양이 <-> 강아지
  • cat01.jpg <-> dog01.jpg

 

■ HTML 코드

<div>

    <img src="images/cat01.jpg" name="cat1">
    <img src="images/cat02.jpg" name="cat2">
    <img src="images/cat03.jpg" name="cat3">
    <img src="images/cat04.jpg" name="cat4">
    <img src="images/cat05.jpg" name="cat5">


</div>

 

■ CSS 코드

<style>
    img {
        width : 200px;
        height : 200px;
        margin : 5px;
    }
</style>

 

■ JavaScript

<script>
    cat1.onmouseover = m1;
    cat1.onmouseout = m2;
    cat2.onmouseover = m3;
    cat2.onmouseout = m4;
    cat3.onmouseover = m5;
    cat3.onmouseout = m6;
    cat4.onmouseover = m7;
    cat4.onmouseout = m8;
    cat5.onmouseover = m9;
    cat5.onmouseout = m10;

    function m1() {
        cat1.src = 'images/dog01.jpg';
    }

    function m2() {
        cat1.src = 'images/cat01.jpg';
    }

    function m3() {
        cat2.src = 'images/dog02.jpg';
    }

    function m4() {
        cat2.src = 'images/cat02.jpg';
    }

    function m5() {
        cat3.src = 'images/dog03.jpg';
    }

    function m6() {
        cat3.src = 'images/cat03.jpg';
    }

    function m7() {
        cat4.src = 'images/dog04.jpg';
    }

    function m8() {
        cat4.src = 'images/cat04.jpg';
    }

    function m9() {
        cat5.src = 'images/dog05.jpg';
    }

    function m10() {
        cat5.src = 'images/cat05.jpg';
    }
</script>

 

■ 실행 결과

해당 이미지 커서 onmouse시, 이미지 변경

 

★ 문제 2 

• 아래와 같은 문서를 생성하시오.
• 조건
  • 롤 오버 이미지를 구현하시오.
  • 버튼을 클릭하면 새창으로 이미지를 띄우시오.
  • dog01.jpg(기본 크기)
  • dog01_big.jpg(큰 크기)

 

■ HTML 코드

<table>
    <tr>
        <td>
            <a href="#" data-no="1" id="dog1">강아지1</a>
            <a href="#" data-no="2" id="dog2">강아지2</a>
            <a href="#" data-no="3" id="dog3">강아지3</a>
            <a href="#" data-no="4"
            id="dog4">강아지4</a>
            <a href="#" data-no="5"
            id="dog5">강아지5</a>
        </td>
        <td><img src="images/dog01.jpg" name="img"></td>
    </tr>
</table>

 

■ CSS 코드

<style>
    <style>
    body {
        margin: 25px;
    }
    table {
        border: 1px solid #A9A9A9;
        border-collapse: collapse;
        width: 600px;
    }
    table td {
        border: 1px solid #A9A9A9;
        text-align: center;
    }
    table tr td a {
        display: block;
        margin: 10px;
        text-decoration: none;
        color: #444;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        background-color: #eee;
        padding: 5px 10px;
    }
</style>

 

■ JavaScript

<script>
     var img = document.all.img;

    document.all.dog1.onmouseover = m1;
    document.all.dog2.onmouseover = m2;
    document.all.dog3.onmouseover = m3;
    document.all.dog4.onmouseover = m4;
    document.all.dog5.onmouseover = m5;


    function m1() {
    img.src = 'images/dog01.jpg';
    }

    function m2() {
    img.src = 'images/dog02.jpg';
    }

    function m3() {
    img.src = 'images/dog03.jpg';
    }

    function m4() {
    img.src = 'images/dog04.jpg';
    }

    function m5() {
    img.src = 'images/dog05.jpg';
    }
</script>

 

■ 실행 결과

강아지 박스에 onmouse시, 해당 이미지 변경

 

★ 문제 3

• 아래와 같은 문서를 생성하시오.
• 조건
  • 롤 오버 이미지를 구현하시오.
  • img01.jpg <-> img04.jpg
  • img02.jpg <-> img05.jpg
  • img03.jpg <-> img06.jpg
  • 이미지에 맞게 텍스트를 변경하시오.

 

■ HTML 코드

<div>
    <img src="images/img01.jpg" id="ski" value = "스키">
    <img src="images/img02.jpg" id="flower" value = "해바라기" >
    <img src="images/img03.jpg" id="tree" value ="나무">
</div>
<input type="text" id="txt" value="">

 

■ CSS 코드

<style>
    div {
        border : 1px solid black;
        width : 540px;
        margin : 10px;
        padding : 10px;
    }
    #txt {
        width : 540px;
        margin : 10px;
        padding : 10px;
        color : red;
        font-size : 20px;
        border : 0px solid white;
        font-weight: bold;
    }
</style>

 

■ JavaScript

<script>

    var img1 = document.all.ski;
    var img2 = document.all.flower;
    var img3 = document.all.tree;
    var txt = document.all.txt;

    img1.onmouseover = m1;
    img1.onmouseout = m2;
    img2.onmouseover = m3;
    img2.onmouseout = m4;
    img3.onmouseover = m5;
    img3.onmouseout = m6;

    function m1() {
        img1.src = 'images/img04.jpg'
        txt.value = '\'스키\'타는 사람이 \'당근\'으로 변했습니다.'
    }

    function m2() {
        img1.src = 'images/img01.jpg'
        txt.value = ''
    }

    function m3() {
        img2.src = 'images/img05.jpg'
        txt.value = '\'해바라기\'가  \'피망\'으로 변했습니다.'
    }

    function m4() {
        img2.src = 'images/img02.jpg'
        txt.value = ''
    }

    function m5() {
        img3.src = 'images/img06.jpg'
        txt.value = '\'나무\'가  \'개\'가 됐습니다.'
    }

    function m6() {
        img3.src = 'images/img03.jpg'
        txt.value = ''
    }


</script>

 

■ 실행 결과

해당 이미지에, onmouse 시, 이미지 변경 및 문구 출력

 

★ 문제 4

• 아래와 같은 문서를 생성하시오
• 조건
  • 패턴을 그리고 입력 버튼을 누르시오.
  • Password : 'L'

 

■ HTML 코드

<h1>Pattern Lock</h1>
<div style="text-align: center;">
    <img src="images/rect_icon01.png" data-no="1">
    <img src="images/rect_icon02.png" data-no="2">
    <img src="images/rect_icon03.png" data-no="3"><br>
    <img src="images/rect_icon04.png" data-no="4">
    <img src="images/rect_icon05.png" data-no="5">		
    <img src="images/rect_icon06.png" data-no="6"><br>
    <img src="images/rect_icon07.png" data-no="7">
    <img src="images/rect_icon08.png" data-no="8">
    <img src="images/rect_icon09.png" data-no="9">
</div>
<div style="text-align: center;">
    <input type="button" value="RESET" onclick="reset();">
    <input type="button" value="INPUT" onclick="input();">
</div>

 

■ CSS 코드

<style>
    h1 {
        text-align: center;
        color : gray;
    }
    img { border: 10px solid #A9A9A9; margin: 10px; }
    input { border: 10px solid #A9A9A9; padding: 5px 70px; font-size: 1.7em;  margin: 10px 5px; }
</style>

 

■ JavaScript

<script>
    var list;
    var pw = "";

    window.onload = function() {

        list = document.images;

        for (var i=0; i<list.length; i++) {
            list[i].onmouseover = function(event) {
                pw += getNum(event.target.dataset['no']);
                event.srcElement.src = "images/rect_icon10.png";
            };
        }

    };

    function reset() {
        for (var i=0; i<list.length; i++) {
            list[i].src = "images/rect_icon0" + (i+1) + ".png";
        }
        pw = "";
    }

    function input() {
        if (pw == "14789") {
            location.href = "https://maengmo.tistory.com/";
        } else {
            alert("패턴이 올바르지 않습니다!!");
            reset();
        }
    }

    function getNum(url) {
        var index = url.lastIndexOf(".");
        return url.substr(index-1, 1);
    }
</script>

 

■ 실행 결과

패턴 입력 후, 패턴이 올바르면 개발블로그로 이동, 올바르지 않으면 오류와 함께 실패