(Öncelikle belirtmeliyim ki aşağıda okuyacağınız bilgi eski bir yazıdan alıntı. Yeni bir proje için rastgele arkaplan gösterecek ve bunu siteyi fazla yormadan sadece Css ve Php yardımıyla yapacak bir bileşen arıyordum. Eski dostumuz A List Apart imdadıma yetişti ve orada bulunan uygulamayı yaparak sonuca ulaştım. Umarım bu eski bilgi sizler için yararlı olur.)
Öncelikle Neler Gerekli?
Her girişte veya her sayfa açılışında farklı bir arkaplan resmi göstermek için Php (4.2 ve üzeri) Css ve Xhtml çalıştıran bir sunucunuz olması yeterli. Bundan sonrası çok küçük bir iki işleme kalıyor. Dilerseniz uygulamanızı yerel sunucu üzerinde (localhost) dilerseniz de kendi hostunuzda yapabilirsiniz. Bununla birlikte farklı gösterimler için “aynı boy ve genişlikle” formatı (gif, jpeg, png) önemli olmayan resimleriniz olmalı. Bu resimlerinizi hazırladıktan sonra hemen uygulamamıza geçebiliriz.
Yazının Devamını Göster ▼
Rastgele Arkaplan Resmi Atama
Kısaca aşağıda yapacağımız küçük işlemi anlatmak istiyorum sizlere. Bu işlemde bir .php dosyasında yazılmış olan fonksiyon ile resimlerimizi bir dizin içindeyken (veya başka bir dizindeyken) kendi .css (style) dosyamız içine tanımlamış olduğumuz alan ile gösterime alıyoruz. Şimdi size gerekli olan şey Alistapart.com üzerindeki orjinal .php dosyası. Burada gördüğünüz kodları bir metin editör içine alıp “dongu.php” olarak kaydedin. Kayıt işlemini yaptıktan sonra resimlerinizin bulunduğu dizin içine atın.
Bu aşamadan sonra resimlerimizi göstereceğimiz alanın CSS tanımlamasını yapmamız gerekiyor. Bu tanımlama için şöyle bir kod yeterli olacaktır.
#dongualani
{
background:#fff url(dongu.php) no-repeat center top;
width: 800px;
height: 170px;
}
Gördüğünüz gibi stil dosyamızda “dongualani” diye bir id oluşturduk ve bu id üzerinde beyaz arkaplan rengi ve arkaplan resmi olarakta daha önce oluşturduğumuz “dongu.php” dosyasına ithafta bulunduk. Burada dikkat ettiyseniz arkaplan tanımlamasında bir resim dosyası kullanacağımıza bir .php dosyası kullandık ve .php dosyasının işlem yapmasını sağladık. Bu alanda bulunan resim genişlik ve yüksekliğinde siz değişiklikler yapabilirsiniz. Bu kodu kopyalayıp stil dosyanıza kaydediniz.
Stil dosyasını da kaydettikten sonra artık yapacağımız tek şey stil olarak tanımladığımız id sınıfına Xhtml üzerinde atıfta bulunmak. Bunu da aşağıdaki kod yardımıyla gerçekleştirebiliriz.
<div id=”dongualani”> </div>
Yukarıda yer alan kodu da rastgele arkaplan resmimizin görünmesini istediğimiz yere kopyalıyoruz. Bundan sonra dosyamızı kaydederek sonucu görebiliriz. Ben şurada bir örnek çalışma yaptım ve hem Firefox hem de Internet Explorer üzerinde test ettim. Sonuç gayet güzel…
Sorular ve Problemler
Şayet yukarıdaki işlemleri yaptınız ve sonuca ulaşamadıysanız adımları yeniden takip edin. Yukarıda bahsettiğimiz gibi dongu.php ve resim dosyalarınızın aynı dizinde olduğundan emin olun. Şayet resimleriniz ve dongu.php dosyanız farklı bir alandaysa dongu.php içinde $folder = ‘.’; alanına dizin yolunuzu yazın. Bununla birlikte #dongualani kodu içindeki dongu.php dosyasının tam yolunu yazmanız da uygulamanın çalışası için yeterli olacaktır. Ancak aynı dizin içinde dosyalarınız barınıyorsa bunu yapmanıza gerek yoktur.
Kaynaklar: A List Apart | Sonspring.com
güzzel şeyler değil bira daha güzelleştirin bence
işime yaradı. tşkrlerr