Php & Resources

Yukarıda browsler için tek tek bir katman üzerinde görünürlük için gerekli fonksiyonları inceledik. Şimdide ortak fonksiyonları yazalım. Öncelikle browser kontrolünü mutlaka yapmak zorundayız.

ie4 = (document.all) ? true : false;
ns4 = (document.layers) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;

Ve fonksiyonlarımızı yazabiliriz.

function gizle(katman)
   {
     if(ie4)
       document.all[katman].style.visibility = “hidden”;
     if(ns4)
       document.layers[katman].visibility = “hide”;
     if(ns6)
       document.getElementById(katman).style.visibility = “hidden”;
   }
function goster(katman)
   {
     if(ie4)
       document.all[katman].style.visibility = “visible”;
     if(ns4)
       document.layers[katman].visibility = “show”;
     if(ns6)
       document.getElementById(katman).style.visibility = “visible”;
   }

Ortak ifadeleri denemek için tıklayınız .

Okumaya Devam Et »

Bir katmanın görünürlüğünü visibility özelliği ile değiştirebiliriz. Bu değer katmanın görünür olması için visible ve görünmez olması için hidden değerini almalıdır. Burada dikkat edilmesi gereken konu Netscape 4.x bu özelliği tanır fakat değer olarak görünürlük için show ve görünmezlik için hide değerini kullanır.

IE4.x de görünürlük değerini değiştirmek

IE4.x de çalışırken bir elemanın IDsini kullanarak onun görünürlüğünü iki şekilde ayarlayabiliriz.

elemanIDsi.style.visibility="visible/hidden";
veya
document.all['elemanIDsi'].style.visibility=”visible/hidden”;

Şimdi bir örnek üzerinde bu işlemin nasıl yapıldığını görelim.

Okumaya Devam Et »

Sayfa içerisindeki elemanların konumları ile ilgili özellikleri değiştirerek değişik uygulamalar geliştirebiliriz. Mesela bir katmanı gizleme, gösterme, başka bir alana taşımak veya hareket ettirmek gibi. Bu kısımda bu gibi konuları işleyeceğiz.

CSS ile katman tanımlama

Browserler arasında Nestcape 4.x serisi <LAYER> tagı ile katman kullanmayı ve CSS ile katman tanımlamayı destekler. Fakat İnternet Explorer ve Nestcape 6.x serisi sadece CSS ile katmanları tanımlayabilirler ve kullanabilirler. Bu nedenle bir bu bölümde sadece CSS ile katman kullanmayı göreceğiz.

CSS ( Cascading Style Sheet ) ile katman tanımlamak için <STYLE> tagını kullanıyoruz. Katmanları genel olarak block taglarında kullanabiliriz ( P, DIV, Hx gibi). Genel katman tanımlama tagı olarak <DIV> tagını kullanacağız.

Örnek olarak bir katman tanımlarsak :

<DIV STYLE="position:absolute; left:20; top:30; width:200">

şeklinde bir tanımlama yapmamız yeterli olacaktır.Bu şekilde bir kullanım satır içi kullanımdır. Şimdi satır içi kullanımla birlikte katman tanımlarken kullanacağımız diğer sitil özelliklerini görelim.

• position
  Bu özellik katmanın durumunu belirtir. Üç değer alabilir.
  absolute : bu parametre kullanıldığında katman bağımsız bir şekilde oluşturulacaktır. Verilen değerlere göre sayfa üzerinde dilediğimiz yere katmanı yerleştirebiliriz.
  relative : bu özellik ile katmanı sayfa içerisinde katmanın tanımlandığı yere göre konumladırılır.
  inherid : bu özellikte katmanın bir başka katman içerisinde kullanıldığında içerisinde bulunduğu katmana göre hareket etmesini sağlar. Eğer başka bir katman içerisinde tanımlanmadıysa katman absolute özelliği gibi davranacaktır.
• left
  Bu özellik katmanın sol kenara göre nereye yerleştirileceğini belirtir. left: 10 şekllinde bir kullanım sol kenara göre 10 pixel sağa katman yerleşecektir.
• top
  Bu özellik katmanın sayfanın enüstüne göre konumlandırılmasını sağlar.
• width
  Katmanın genişliğini belirtir. Kullanılmadığı zaman browser kendi ayarlama yapacaktır. Fakat böyle durumlarda Internet Explorer sorun çıkarabilir. Bu nedenle belirtilmesi gereklidir.
• height
  Katmanın yüksekliğini belirtir.
• clip
  Bu özellik ile katmanın hangi bölümünün görünür olacağı belirtilir. Katmanın istenilen bölümü görünür kılınabilir. clip:rect(ust,sağ,alt,sol) şekllinde bir kullanımı vardır. Burada :
  üst katmanın en üstünden ne kadar birim uzaklıkta gösterime başlanacağını bellirtir.
  Sağ değeri ise katmanın sol kısımdan ne kadar birim sağdan başlayacağını belirtilir.
  Alt parametresi katmanın en üsten ne kadar aşağıya doğru gösterileceğni belirtir.
  Sol parametresi katmanın en soldan ne kadar sağa yanaşık gösterileceğini belirtir.
• visibility
  Bu parametre katmanın görünürlüğünü belirtir. visible parametresi ile katman görünür olacaktır. hidden parametresi ise katmanın görünmez olamsını sağlar.
• z-index
  Bu parametre derinlik olarak katmanın hangi seviyede olacağını belirtir. Bu değer kullanılmadığında katmanlar sayfa içerisinda aynı derinlikte kalacaklardır. Değer artıkça katmanın daha üste görünmesi sağlanır.
• background-color
  Bu değer katmanın zemin rengini belirler. Değer olarak tanımlı renk isimleri veya hexadesimal RGB üçlüsü girilebilir. Nescape 4.x serisinde bu değer katman içerisine yazılan yazının zemin rengini belirtir.
• layer-background-color
  Bu değer Nestcape 4.x için layerin zemin rengini belirler.
• background-image
  Katman için zemine bir resim yerleştirir. Kullanımı : background-image:URL(zemin.gif) şeklindedir.
• layer-background-image
  Nestcape için katmana bir zemin resmi yerleştirir. Kullanımı layer-background-image:URL(zemin.gif) şeklindedir.

Bu özelliklerin tam açıklamasını W3C CSS-Positioning adresinide bulabilirsiniz. Şimdi örnek bir katman tanımlayalım :

<DIV ID="yeniKatman" STYLE="
        position:absolute;
        left:100;
        top:40;
        width:200;
        height:200;
        clip:rect(0,200,200,0);
        background-color:red;
        layer-background-color:red;
        visibility:visible;"> yeniKatman isminde tanımlanmış bir katman.
</DIV>

Bu katmanı görmek için tıklayınız . Burada dikkat edilmesi gereken bir konuda ID özelliğidir. HTML 4.0 da tanımlanan bu özellik ile tüm sayfa elemanlarına özel bir kimlik verilebilir ve istenildiğinde verilen kimlik ile elemana istenilen yerden ulaşılınablir. Burada verdiğimiz yeniKatman isminde başka bir elemena isim veremeyiz ve yeniKatman ismi ile istediğimiz zaman bu katmana ulaşabiliriz.

Şimdide bir bloğun zemin renginin nasıl değiştirilebileceğini görelim. Bu örneğimizin diğer iki örnekten farlı olan tarafı javascript ile bir fonksiyon tanımlayacak olmamız ve sonrada bu fonksiyon üzerinden zemin rengini değiştirecek olmamızdır. Bunun nedeni ise iki browser içinde tek bir ifadeyi kullanmak ve sayfamızın iki browser üzerinden de çalışmasını sağlamaktır.

Öncelikle bloğumuzu tanımlayalım.

<DIV ID="alan"
        STYLE="margin : 20; background-color: gray;
        width: 300; height:100;
        border-style:solid; border-color:red;
        border-width:1"
        onClick="zRenginiDegistir('alan')">
        alan kimliği verdiğimiz bir blok.
</DIV>

Tanımladığımız elemana alan adı verdik. Biz bu elemanın değişik özelliklerini artık IDsi ile kolaylıkla denetleyebileceğiz.

Okumaya Devam Et »

Aynı işlemi Netscape 6.x ile de yapabiliriz. Netscape standart DOM yapısını kullandığından bu işlemi farklı bir şekilde yapıyor. Öncelikle bir elemana IDsi üzerinden erişmek için Netscape 6.x getElemanById yöntemini kullanıyor. Şimdi bu işlemin nasıl olacağını görelim.

İlk olarak bir döküman üzerinde çalıştığımızdan document ve ardından kullanacağımız yöntem olan getElemanById gelir. Ulaşacağımız elemanın IDsi burada kullanılır.

document.getElemanById('elemanIDsi')

Ardından sitil özellikleri kullanılacağından style eki ve kullanacağımız sitil özelliği ve değerini ekliyoruz.

document.getElementById('elemanIDsi').style.ozellik="yeni_değer";

Bu ifadeleri yukarıdaki örneğimize uyarlarsak.

DHTML sayfa tasarımcıları için
  <B ID="onemli"
  onMouseOver="document.getElementById('onemli').style.color='red'"
  onMouseOut="document.getElementById('onemli').style.color='black'">
  önemli
  </B>
teknikler sunar.

Şeklinde yeni ifadelerimiz oluşur. Şimdi bu ifadelerin Netscape 6.x ve IE 5.5 üzerinde deneyebilirsiniz.

Okumaya Devam Et »