Web sayfaları üzerinde resimleri Html IMG etiketi ile ekliyoruz. Bazı durumlarda sayfaya resimleri javascript ile eklemek durumunda kalabiliyoruz. Bu gibi durumlarda farklı yöntemler kullanılabilir.
Bu nedenle resim ekleyeceğimiz duruma göre farklı yöntemler seçebiliyoruz. Şimdi bu konuya açıklık getirelim.
Javascript document.write Metodu İle Sayfaya Resim Ekleme
Bir web sayfası bir belgedir ve bu Javascript tarafından document olarak tanımlanır. Bir web sayfasına bir yazı / etiket yazdırılacaksa bu durumda write metodu kullanılır.
document.write Metodu
document.write metodu sayfa yüklenirken çalışır ve sayfaya bir şeyler eklemek için kullanılır. Bu bir etiket olabileceği gibi bir metin de olabilir. Bu nedenle sayfa yüklenirken bir resim eklenmek istediğinde bu yöntem kullanılabilir.
Kullanım şekli aşağıdaki gibidir.
<script>
document.write("<IMG src='resim_adresi />");
</script>Resim adresi yerine sayfaya eklenecek resimin adresi gelecektir. Etiket ile ilgili diğer özellikler de kulllanılabilir. Mesela width, height gibi.
Bir resim Javascript document.write metodu ile web sayfasına eklenecek ise bu scriptin BODY etiketi içerisinde olması gerekir.
document.write Örnek Kullanım
Örnek bir kullanım aşağıdaki gibidir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript İle Resim Ekleme</title>
</head>
<body>
<h3>Javascript İle Resim Ekleme</h3>
<script>
document.write(
'<IMG src="https://netbilio.com/wp-content/uploads/2022/04/javascript-neden-ogrenilmeli.jpg.webp" width="600" />'
);
</script>
</body>
</html>Sayfayı oluşturup kayıt ettiğinizde (Mesela resim.html olarak) aşağıdaki görüntüyü alacaksınız.
Javascript document.createElement Metodu İle Web Sayfasına Resim Ekleme
Diğer bir yöntem de document nesnesinin createElement metodunu kullanmaktır. createElement metodu ile istediğimiz bir etiketi uygulama içerisinde gerektiğinde oluşturabiliriz. Sonrasında da oluşturulan elementi bir değişkene atayarak kullanabiliriz.
Kullanım şekli
const element = document.createElement("etiket_adi");
şeklindedir. Etiket adı yazan yere oluşturulacak etiketin adı gelecektir. Mesela bir resim oluşturulacaksa
const resim = document.createElement("img");şeklinde bir kullanım yeterli olacaktır.
Javascript document.createElement Metodu İle Resim Ekleme
Şimdi bir örnek daha yapalım. Bu örneğimizde, sayfa yüklendikten sonra bir düğmeye tıklayarak sayfaya bir resim ekleyeceğiz. Bunun için de doğal olarak Javascript kullanacağız.
Bu örneğimizde bir butona tıklayarak sayfaya Javascript ile resim eklemeyi görüyoruz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
const resimEkle = () => {
const imgUrl = "https://netbilio.com/wp-content/uploads/2023/01/javascript-programlama-dili-midir.jpg.webp";
const resimAlaniDOM = document.getElementById('resimAlani');
const imgDOM = document.createElement("img");
imgDOM.setAttribute("height", 415);
imgDOM.setAttribute("width", 738);
imgDOM.setAttribute("src", imgUrl)
resimAlaniDOM.appendChild(imgDOM);
}
</script>
<title>Javascript İle Resim Ekleme</title>
</head>
<body>
<h3>Javascript İle Resim Ekleme</h3>
<div id="resimAlani"></div>
<button onclick="resimEkle()">Resim Ekle</button>
</body>
</html>Yukarıdaki örneğimizi bir sayfaya yazıp .html olarak kayıt ettikten sonra bir tarayıcıda açarsanız aşağıdaki gibi bir sonuç göreceğiz.
Şimdi kısaca ne yaptığımızı açıklayalım.
- Önce bir resim adresini imgUrl değişkenine atadık.
- Resimin ekleneceği etiketi sayfadan getElementById ile yakaladık.
- Sonrasında createElement ile bir img etiketi oluşturduk.
- Oluşturduğumuz etiketi imgDOM değişkenine atadık.
- Ve setAttribute metodu ile oluşturduğumuz resime yükseklik, genişlik ve resim adresini birer özellik olarak geçtik.
- Ve appendChild metodunu kullanarak oluşturduğumuz IMG etiketini (resim nesnesini) sayfamızda daha önce belirlediğimiz etiketin içerisine yerleştirdik.
Yukarıdaki işlemleri resimEkle metodu içerisinde yaptık. Bunu tetiklemek için de bir buton kullandık.
İhtiyaçlara bağlı olarak farklı işlemler de yapılabilirdi.
Sonuç
Javascript ile bir sayfaya resim eklemek için document.write ve document.createElement metodularının nasıl kullanılacağını gördük. Bu metodlar ile sayfanın istediğimiz yerine bir resimi kolayca ekleyebiliriz.
Javascript ile ilgili yaşadığınız zorlukları ve bulduğunuz çözümleri yorumlardan bizim ile paylaşabilirsiniz. Sorularınızı da yorumlardan bize iletebilirsiniz.