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>
