Web geliştirme dünyasında, kullanıcı dostu arayüzler oluşturmak için sıklıkla kullanılan teknolojiler arasında HTML, CSS ve JavaScript yer almaktadır. Bu makalede, parametresiz fonksiyonlar kullanarak basit bir resim galerisi oluşturma işlemini adım adım ele alacağız. Özellikle, “Görsel 5.7’deki gibi” bir yapı için gerekli adımları izleyerek, görselleri dinamik bir şekilde değiştirebileceksiniz.
Parametresiz Fonksiyonlar Kullanarak Görsel ’deki Gibi Resim Galerisi Oluşturmak İçin Yönergeler Doğrultusunda İşlemleri Gerçekleştiriniz (JavaScript, HTML)
Projemizin Hedefi
Bu yazının amacı, HTML ve JavaScript kullanarak bir resim galerisi oluşturmak ve bu galeriye parametresiz fonksiyonlar aracılığıyla farklı resimler yüklemektir. Resimler, kullanıcının etkileşime geçebileceği butonlar aracılığıyla değişecektir. Arka plan renginin turuncu olduğu ve her butona tıklandığında farklı bir görselin gösterildiği basit bir galeri tasarımı yapacağız.
Adım 1: HTML Yapısını Kurmak
İlk olarak, HTML sayfası üzerinde temel bir yapı oluşturuyoruz. Bu yapıda bir resim alanı ve üç adet buton bulunacak. Butonlara tıklandıkça, belirli resimler görüntülenecek. İşte bu yapıyı kurmak için gerekli olan HTML kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Resim Galerisi</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="gallery-container"> <img id="image" src="https://picsum.photos/400/300?random=1" alt="resim" /> <div class="buttons"> <button onclick="changeImage(1)">Resim 1</button> <button onclick="changeImage(2)">Resim 2</button> <button onclick="changeImage(3)">Resim 3</button> </div> </div> <script src="script.js"></script> </body> </html> |
Bu kod, sayfamızda bir resim alanı (img) ve altındaki butonları içeren basit bir yapı oluşturur. Butonlar, onclick olayıyla tıklandığında, JavaScript fonksiyonlarını çağırarak resimleri değiştirecektir.
Adım 2: CSS ile Sayfa Tasarımını Yapmak
Sayfanın stilini oluşturmak, kullanıcı deneyimini daha keyifli hale getirebilir. CSS kullanarak arka plan rengini turuncu yapacak ve galeriyi ortalayacağız. İşte gerekli CSS kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | body { background-color: orange; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .gallery-container { text-align: center; } img { width: 400px; height: 300px; border: 5px solid black; } .buttons { margin-top: 20px; } button { margin: 5px; padding: 10px; font-size: 16px; cursor: pointer; border: none; background-color: white; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } button:hover { background-color: #f0f0f0; } |
Bu stil sayesinde sayfanın arka planı turuncu renkte olacak, resimler belirli bir boyutta gösterilecek ve butonlar şık bir şekilde yerleştirilecektir.
Adım 3: JavaScript ile Dinamik Resim Değiştirme
JavaScript ile resimlerin dinamik olarak değiştirilmesini sağlamak için bir fonksiyon yazmamız gerekiyor. Bu fonksiyon, her bir butona tıklandığında, resmin kaynağını (src) değiştirecektir. İşte bu işlevi yerine getirecek JavaScript kodu:
1 2 3 4 5 6 7 8 | function changeImage(imageNumber) { const image = document.getElementById('image'); // URL'yi değiştirecek image.src = `https://picsum.photos/400/300?random=${imageNumber}`; } |
Burada, changeImage fonksiyonu parametresiz olarak çalışmakta ve butonlara tıklandığında ilgili resmi göstermektedir. Her butonun kendi ID’sine bağlı olarak, farklı resimler yüklenir.
Sonuç
Bu adımları takip ederek, parametresiz fonksiyonlar kullanarak basit bir resim galerisi oluşturabilirsiniz. Görsel 5.7’deki gibi, farklı butonlara tıklandığında resimler değişir ve sayfa turuncu bir arka plana sahip olur. Bu yöntem, temel web geliştirme becerilerinizi geliştirmenize yardımcı olacak basit ama etkili bir projedir.
Web geliştiricileri için bu tür projeler, HTML, CSS ve JavaScript’in temellerini öğrenmenin yanı sıra, kullanıcı etkileşimini anlamayı da sağlar. Parametresiz fonksiyonlar kullanarak gerçekleştirilen bu işlemler, daha dinamik ve kullanıcı dostu web sayfaları oluşturmanıza olanak tanır.
Yorum Yap