การกด Keyboard เพื่อเปลี่ยนสีรูป

การกด Keyboard เพื่อเปลี่ยนสีรูปสามารถแบ่งเป็นขั้นตอนได้ดังนี้
    1. ใส id ลงใน <img>
    2. สร้าง class ที่ใช้ในการเปลี่ยนสีใน css
    3. สร้างเงื่อนไขเมื่อกด keyboard


1. ใส่ id ให้กับ img tag เพื่อที่จะสามารถใช้คำสั่งเจาะจงไปที่ id นั้น

    <img id="leftarrow" src="left arrow.png">

left arrow.png

2. สร้าง Class ที่ใช้ในการเปลี่ยนสี

    <style>
        .add_red {
          -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
          filter: opacity(.6) drop-shadow(0 0 0 red);
       }
    </style>

    ฟังก์ชันที่ใช้ มีดังนี้

    1.opactity(%) ใช้ในการกำหนดความทึบแสงของภาพ ซึ่งระดับของความทึบแสงจะบอกถึงระดับโปร่งใสของภาพ โดย
    0% คือ ภาพมีความโปร่งใสมากที่สุด
    100% คือ ภาพต้นแบบที่ไม่มีการปรับระดับความทึบแสง

                                       opacity(100%)                                      opacity(50%)

    2.drop-shadow ใช้ในการเพิ่มเงาลงในภาพ โดยจะมีตัวแปรดังนี้

        - offset-x offset-y  โดยที่ offset-x จะกำหนดตำแหน่งของเงาในแนวราบ โดยถ้ามีค่าเป็นลบ เงาจะมีทิศไปทางขวา และ offset-y จะกำหนดตำแหน่งในแนวนอน โดยถ้าตั้งค่าเป็นลบ เงาจะมีทิศขึ้น
        - blur-radius ใช้ในการกำหนดรัศมีการเบลอภาพ ซึ่งการเบลอของภาพจะเพิ่มขึ้นตามค่าที่ได้รับเข้ามา
        - spread-radius ใช้กำหนดขนาดของเงา ยิ่งมีค่ามากก็เงาก็จะใหญ่ตามค่าที่ได้รับ ถ้าค่าติดลบ เงานที่ได้จะมีขนาดเล็กลง


        เราใช้ทั้งสองคุณสมบัตินี้ในการเพิ่มสีให้กับรูปสีขาว คือการสร้างเงาที่เป็นสีที่เราต้องการ จากนั้นทำให้ภาพโปร่งใส จนเห็นสีของเงา

3. สร้างเงื่อนไขเมื่อกด keyboard

    <script>
    document.onkeydown = function(e) {
        var keyCode = e.keyCode;

        if (keyCode == 37) { //left arrow on keyboard
            $("#leftarrow").addClass("add_red");
            setTimeout(
                function() {
                    $("#leftarrow").removeClass("add_red")
                }, 300
            );
        }
    };
    </script>

    วิธีที่เราจะนำ Class ที่ใช้ในการเปลียนสีมาใช้ คือ ใช้ฟังก์ชัน addClass เพื่อที่จะเพิ่ม Class ลงใน selector ที่ชื่อ leftarrow จากโค้ดด้านบน เมื่อกดปุ่ม left arrow บน keyboard ( มีค่าเท่ากับ 37 ในตาราง ascii) เมื่อกด ตัวลูกศรจะเปลี่ยนสี หลังจากนั้น .3 วินาที จึงจะกลับมาเป็นสีขาวเหมือนเดิม