Divebi.com

Web Yazılım JS

JavaScript Kullanarak Işığı Aç Kapat İşlemi

Yayınlanan

İcerisinde

JavaScript

Bu yazımızda, HTML sayfamıza yazdığımız JavaScript kodlarını. Hâlihazırda bulunan iki adet resmi döngüye sokarak aç kapat işlemi yapacağız.

Projemizi geçmeden önce bir HTML sayfası oluşturun veya Divebi Önizle (kod önizleme) web sayfasını kullanabilirsiniz. Aşağıda vermiş olduğum kodları kopyala yapıştır yaparak kodları test edebilirsiniz.

Kodlar:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <style>
            body{
                background-color: #dbdbdb;
            }
            img {
                margin-top: 50px;
            }
            #button {
                height: 50px;
                width: 125px;
                background-color: #ffffff;
                color: #000000;
                font-size: 16px;
                border-radius: 15px;
                border: 3px solid #cacaca;
            }
            #button:hover {
                background-color: #000000;
                color: #ffffff;
                border: 3px solid #000000;
            }
        </style>
        <center> <!--kapalı olan resmin yolunu yazın-->
        <img id="resim" src="/site/img/kapali.png"><br>
        <button id="button" onclick="ackapat()">AÇ - KAPAT</button>
        </center>
        <script>
            var deger=false;
            var kapali="/site/img/kapali.png"; // kapalı resmin yolunu yazın 
            var acik="/site/img/acik.png"; // açık olan resmin yolunu yazın
            function ackapat(){
                if(deger==false){
                    document.getElementById("resim").src=acik;
                    deger=true;
                }
                else if(deger==true){
                    document.getElementById("resim").src=kapali;
                    deger=false;
                }
            }
        </script>
    </body>
</html>

Aşağıda youtube kanalımda paylaşmış olduğum videoyu izleyebilirsiniz.

Yorum yapmak için tıklayın

Cevap bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Trend Olan Gönderiler