Program Yapmak | Programcılık Hakkında Her Şey | VİSUAL BASİC 6.0 | C, C++ ve C# Yazılım Dilleri | VB.NET Yazılım Dili

javascript ile dinamik sayfalar

Şimdi imleci üzerine götürünce değişen imajlı linkler yapmasını öğrenelim. Bunun için evvela aynı boyutta iki resim yapmamız gerekiyor. Bunların biri sayfa yüklendiğinde diğeri ise imleci üzerine getirdiğimizde gözükecek. İstediğiniz efekti vermek, yaptığınız resimlere kalmış birşey, aşağıdaki iki resim gibi...
 

                       
 

Sayfayı Görüntülemek için Tıklayın (onMouseOver Efektleri)

Kodu Görüntülemek için Tıklayın (onMouseOver Efektleri)

    Üzerine gidince değişecek her imaj için ayrı kodlar yazmamız gerekiyor. Script etiketleri arasındaki bu kodlarda, onMouseOver ve onMouseOut olayları için hazırladığımız iki resmide belirtiyoruz. Body bölümünde linkimizi oluştururken ilk olarak gözükecek resmimizi klasik img tagi içinde belirtiyoruz. Bu arada hangi script`in hangi imajda çalışacağını name attribut`unda verdiğimiz isimle belirliyoruz. Link etiketimizde ise, onMouseOver ve onMouseOut için hazırladığımız degisen_imaj fonksiyonunu çağırıp, parantez içinde değerlerimizi veriyoruz. Bu teknikte unutulmaması gereken yaptığınız resimlerin boyutları ve içindeki çizimlerin birbiriyle tamamen uyumlu olması. Arka arkaya yüklendiklerinde göze çirkin gözükmemeliler. Ayrıca img tagi içindeki name attribute` una verdiğiniz isim Script kodundaki ile aynı olmalı. Kodu dikkatli incelerseniz aslında ne kadarda kolay olduğunu anlayacaksınız. Bu teknik ile güzel efekter yapmak tamamiyle hazırladığınız resimlerdeki yaratıcılığınıza bağlı.

    Microsoft `un sitesinden bildiğimiz meşhur dinamik menüler! Bu tür menüler özellikle çok fazla konusu ve linki olan siteler için gerçekten çok kullanışlı ve ideal. Şimdi aşağı doğru inen menü örneği yapacağız, ama tablo ile oynayarak çok kolay bir şekilde sağa-sola doğru giden menülerde yapabilirsiniz.

Kodu Görüntülemek için Tıklayın (Dinamik Menü)

    Örnekte oluşturduğumuz stil şablonlarının şekli tamamiyle sizin zevkinize ve ihtiyaçlarınıza kalmış birşey. İlk olarak menuAc adıyla bir fonksiyon oluşturuyoruz. Bu fonksiyon aynı zamanda digerleriniKapat ve menuGoster fonksiyonlarını da çağırıyor, buna daha sonra değineceğiz. Oluşturduğumuz digerleriniKapat fonksiyonunda 4 adet menümüzü isimleriyle beraber yazıyoruz ve if komutu yardımıyla katmanadi değeri menu1 değil ise menugizle fonksiyonuna menu1 değerini göndererek katmanı gizle diyoruz. Aynı şey diğer menuler içinde geçerli.

    Üçüncü fonksiyonumuz olan menuGizle `de ise ornek adı verdiğimiz katmanı, iki browser`ın anlayacağı şekilde yazdığımız kodlarla gizliyoruz. Bunu, if (eğer) Netscape ise (document.layers) kalıbını kullanarak visibility (görünebilirlik) özelliğine hide , if (eğer) Explorer ise (document.all) kalıbını kullanarak visibility özelliğine hidden değerlerini verip katmanı gizle diyerek yapıyoruz. Dördüncü fonksiyonda ise visibility özelliğine verdiğimiz visible ve show değerleri sayesinde tam tersi görünür hale getiriyoruz.

    Body bölümünde ilk olarak ana başlıkların gözükeceği menüler oluşturuyoruz. (Örnekte 4 tane) Bu linklerin içinde, imleci üzerine getirince onMouseOver olayı sayesinde çalışacak menuAc fonksiyonuna, katmana verdiğimiz isim ile beraber atıfta bulunuyoruz. Bu başlıklara sadece onMouseOver olayını koymamızın nedeni, Netscape`in katmanların içine yerleştirilen olayları tanımıyor olması. Yani eğer onMouseOut olayınıda koyup imleci çekince yok olmasını sağlasaydık Netscape`de alt likleri görür ama üzerine gidip tıklayamazdık. Yine Netscape katmanlara yerleştirilen olayları tanımadığından, imleci çekince katmanın yok olması için onMouseOut olayını en alt linke yerleştirmek zorunda kalıyoruz. Bu durumda Netscape`de, katmanın yok olması olayı sadece başka bir menüyü seçince ve en alt linkten imleci çekince çalışıyor. Ama Explorer`da sorun yok, çünkü katmanın içindeki hücreye (td etiketine) koyduğumuz onMouseOut olayı sayesinde imleci neredeyken çekersek çekelim menü yok olacaktır.

    Daha sonra imleç hareketiyle görünür olacak 4 adet menümüz için 4 tablo oluşturup, bu tabloları ayrı ayrı DIV etiketleri içine alıyoruz. Bu katmanlarımıza, position`a verdiğimiz absolute değeri sayesinde kesin koordinatlar tayin ediyoruz. (uygun yeri bulmak biraz uğraştırabilir) Ve visibility`e verdiğimiz hidden değeri ile de katmanı bir sonraki emre kadar gizliyoruz. Bu katmanlardaki hücrelere imleç hareketine bağlı olay ve fonsiyonlarımızı da yerleştiriyoruz.

    menuAc fonksiyonunun içindeki, digerleriniKapat ve menuGoster fonksiyonlarına daha sonra değineceğimizi söylemiştik. menuAc fonksiyonu çağırıldı zaman bu fonksiyon, diğer açık katmanları kapatmak için hazırladığımız digerleriniKapat fonksiyonu sayesinde açık olabilecek katmanları kapatıyor. menuGoster fonksiyonu sayesindeyse imleci üzerine getirdiğimiz katmanı görünür kılıyor.

    Bu teknikte unutulmaması gereken, katmanlara id kullanarak verdiğimiz isimlerin, yukarıda hazırladığımız Script`teki ile ve olayları kullanarak çağırdığımız fonksiyonlara verdiğimiz değerlerle aynı olmalıdır. Menüyü stiller ile oynayarak istediğiniz şekle sokmak ve sayısını arttırıp-azaltmak tamamiyle size kalmış birşey...

Sincan Laptop tamiratı ile alakalı içeriklerin bulunduğu web siteden bilgilere ulaşabilirsiniz. Sincan'da laptop tamiratını en iyi yapan yerleri sorgulayabilirsiniz. Cihan KOÇ
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=