Yüz Değiştirme

tarihinde gönderilmiş tarafından

Alınan Fotoğraf Freepik sitesindendir. Fotoğrafa ulaşmak için tıklayınız.

<!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>
        div {
            width: 350px;
            height: 300px;
            background-color: blue;
            float: left;
            margin: 10px;
            text-align: center;
        }

        #agiz_yeri img {
            width: 50px;
            margin-top: 100px;
        }

        #burun_goz_yeri img {
            width: 150px;
            margin-top: 60px;
        }

        #yuz_yeri img {
            width: 200px;
        }


        #yuz{
width: 200px;
position: absolute;
left: 80px;
        }
       #goz_burun{
width: 110px;
position: absolute;
top:490px;
left: 130px;
       }

       #agiz{
width: 50px;
position: absolute;
top:550px;
left: 155px;
       }

    </style>
</head>

<body>

    <script>
        // JavaScript Kodları
        agiz_no = 1;
        function agiz_degistir() {
            agiz_no++;
            if (agiz_no == 3) { agiz_no = 1; }
            agiz_img = document.getElementById("agiz_img");
            agiz_img.src = "face/agiz_" + agiz_no + ".png";
            sonuc_goster();
        }
        burun_goz_no = 1;
        function burun_goz_degistir() {
             burun_goz_no++;
              if (burun_goz_no == 4) { burun_goz_no = 1; }
             burun_img = document.getElementById("burun_img");
            burun_img.src = "face/burun_goz" + burun_goz_no + ".png";
           
            sonuc_goster();
        }

        yuz_no = 1;
        function yuz_degistir() {
           yuz_no++;
            if (yuz_no == 3) { yuz_no = 1; } 
            yuz_img = document.getElementById("yuz_img");
            yuz_img.src = "face/yuz" + yuz_no + ".png";
            sonuc_goster();
        }
        function sonuc_goster() { 
            sonuc_ekrani = document.getElementById("sonuc_ekrani");
            yuz = document.getElementById("yuz");
            goz_burun = document.getElementById("goz_burun");
            agiz = document.getElementById("agiz");

            yuz.src = "face/yuz"+ yuz_no+".png";
            goz_burun.src = "face/burun_goz"+burun_goz_no+".png";
            agiz.src = "face/agiz_" + agiz_no+".png";


          //  sonuc_ekrani.innerHTML = yuz_no + "-" + burun_goz_no + "-" + agiz_no;
        }
    </script>
    <button onclick="sonuc_goster()"> Tasarımımı Göster </button>


    <div id="agiz_yeri">
        <h1>Ağız</h1>
        <button onclick="agiz_degistir()">İleri</button><br>
        <img id="agiz_img" src="face/agiz_1.png">
    </div>
    <div id="burun_goz_yeri">
        <h1>Burun ve Göz</h1>
        <button onclick="burun_goz_degistir()">İleri</button><br>
        <img id="burun_img" src="face/burun_goz1.png">
    </div>
    <div id="yuz_yeri">
        <h1>Yüz</h1>
        <button onclick="yuz_degistir()">İleri</button><br>
        <img id="yuz_img" src="face/yuz1.png">
    </div>
    <div id="sonuc_ekrani">
        <h1>Sonuç Ekranı</h1>
        <img id="yuz" src="">
        <img id="goz_burun" src="">
        <img id="agiz" src="">

    </div>
</body>

</html>