Yüz Değiştirme
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>