Şimdi gelin birlikte kodları inceleyelim.
function resimler_gelsin(resim_sayisi) : Kodu ile resimler gelsin isimli bir fonksiyon tanımlanmıştır. () içinde fonksiyonun dışarıdan alacağı parametre bilgisi girilmektedir. Böylece istenen sayıda resim ekrana gelsin istenmiştir.
resim = document.createElement(“img”) kodu ile bellekte img tagli bir nesne oluşturulmaktadır. Bu nesne gerçekte html tag’i ile oluşturulan img nesnesi ile aynı özelliklere sahiptir. Fakat görünmez.
resim.src = “images/resim” + i + “.jpg”; kodu ile oluşturulan resim nesnesinin src özelliğine resim dosyasının yolu atanmaktadır. i döngü değişkeni olduğundan döngü her dönüşünde farklı bir dosya bilgisi için kullanılmaktadır.
resim.className =”resim_style”; kodu ile resim nesnesine class bilgisi aktarılmaktadır.
document.body.appendChild(resim); resim nesnesi dokumana çocuk olarak eklenmektedir. Bu işlemden sonra nesnemiz görünür hale gelir.
Tüm Kodlar :
<!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>
@keyframes gorunur_efecti {
from {
transform: scale(1);
opacity: 0.2;
}
to {
transform: scale(1.2);
opacity: 1;
}
}
body {
background-color: darkslateblue;
}
.resim_style {
width: 100px;
height: 100px;
margin: 10px;
border: 5px solid white;
filter: grayscale(100%);
}
.resim_style:hover {
filter: grayscale(0%);
animation-name: gorunur_efecti;
animation-duration: 3s;
}
</style>
</head>
<script>
function resimler_gelsin(resim_sayisi) {
for (var i = 1; i <= resim_sayisi; i++) {
resim = document.createElement("img");
resim.src = "images/resim" + i + ".jpg";
resim.className = "resim_style";
document.body.appendChild(resim);
}
}
</script>
<body onload="resimler_gelsin(142)">
</body>
</html>
Bir yanıt bırakın Cevabı iptal et