CSS `de seçicilerde STYLE tagi arasında, başına nokta koyup isim vererek yaptığımız stili, katman içinde class"...." etiketiyle çağırdığımızı hatırlıyorsunuz herhalde . O zaman karışıklık olmasın diye sadece bu yöntemden bahsetmiştim ama seçicilerin bir başka yöntemi daha var. Bu yöntemde STYLE içinde seçicinin ismini nokta ile değilde # diyez ile başlatıyoruz. Katmanda çağırırken de class yerine id="..." kullanıyoruz. Bunu anlatmamın nedeni ilk kullandığımız yöntemin JavaScript `de işe yaramaması. Şimdi bir de Scripti katmanın dışında kullanmayı görelim.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<TITLE>JavaScript Örnekleri</TITLE>
<STYLE type="text/css">
#var_yok {background-color: red; font-size: 60pt; color: blue}
</STYLE>
</HEAD>
<BODY>
<p><a href="#" onClick="var_yok.style.visibility='hidden'">Bunu tıklarsanız alttaki katman yok olacaktır. </a>
<p><a href="#" onClick="var_yok.style.visibility='visible'">Bunu tıklarsanız katman geri gelecektir. </a>
<p><a href="#" onMouseOver="var_yok.style.visibility='hidden'" onMouseOut="var_yok.style.visibility='visible'">Bunun üzerine gelirseniz alttaki katman yok olacaktır. </a>
<p> <br> <p> <br>
<P><span id="var_yok"> Örnek Katman</span>
</BODY>
</HTML>
Örnekte 3 link ve bir katman göreceksiniz. ilk link katmanı gizli yapacak, ikinci link görünür yapacak ve son link ise üzerine gelince gizli, çekince ise görünür yapacaktır. Gördüğünüz gibi JavaScript komutlarını katmanın dışında kullandık. Bunu ise this ifadesinin yerine belirttiğimiz stil seçicisinin ismini yazarak yaptık. Seçicinin isminden önce nokta koymak JavaScriptte çalışmadığı için # diyez koyduk. Çağırırkende class yerine id="..." kullandık. Eğer seçicinin ismi yerine yine this yazsaydık katman yerine tıkladığımız link yok olurdu.
Şimdi gelelim kötü habere, önceki sayfada kalıbın, Explorer için
katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer ,
Navigator içinse
document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer olduğunu ve Navigator için olan kalıbın sadece Global teknikte çalıştığını ifade etmiştik. Benim yukarıda verdiğim örnek sadece Explorer içindir (kalıpları karşılaştırınca anlayacaksınız). Aynı örneğin Netscape `e uygunu, Netscape için verilen kalıbı uygulasanız bile sadece Global teknikte çalışacaktır. Her browser`da sorunsuz çalışacak efektler için Global tekniğin anlatıldığı yazımızı okumalısınız.
Sadece Explorer için verebileceğim aşağıdaki örnek tıklama suretiyle katmanı belirttiğimiz değerde hareket ettirecektir.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<TITLE>JavaScript Örnekleri</TITLE>
<STYLE type="text/css">
#hareket {background-color:red; font-size:60pt; color: blue; position: absolute; left: 0; top: 0}
</STYLE>
</HEAD>
<BODY>
<p> <br> <p> <br> <p> <br>
<p><a href="#" onClick="hareket.style.left='150'">Bunu tıklarsanız katman 150 piksel sol kenardan uzaklaşacak</a>
<p><a href="#" onClick="hareket.style.top='200'">Bunu tıklarsanız katman 200 piksel üst kenardan uzaklaşacak</a>
<p onClick="hareket.style.top='0'"><a href="#" onClick="hareket.style.left='0'">Bunu tıklarsanız katman 0 yatay ve 0 dikey koordinatlara gidecektir. </a></P>
<P><span id="hareket"> Örnek Katman</span>
</BODY>
</HTML>
Kodu denediğinizde, tıkladığınız linkler yazılı işleri yapacaktır. Burada unutulmaması gereken, head kısmında hazırladığımız seçiciye mutlaka position ; ve sıfır değerinde bile olsa bir koordinat vermemiz gerektiğidir. Aksi taktirde onClick etiketi ile vermeye çalıştığımız hareket çalışmaz. Yani oluşturduğumuz katmana, sayfada bulunduğu koordinatları belirten bir CSS etiketi koymamız şart.
Bunun nedeni, yön vermekte kullandığımız left, top gibi etiketlerin kökünde dayanıyor. Left etiketi katmanı verdiğimiz değer kadar gerçekten bulunduğu yerden sola oynatmaz. Yaptığı iş verdiğimiz değer kadar sol kenardan uzaklaştırmaktır. Tanımını hatırlarsanız "Katmanın sol kısımdan kaç piksel sağda olması gerektiğini belirlemektir." Aynısı top içinde geçerli. Zaten o yüzden linki ikinci defa tıkladığınızda yeniden hareket etmiyor, çünkü zaten belirtilen koordinatta. Özetle top ve left gibi etiketlerin işi, katmanı verdiğimiz değer kadar aşağıya veya sağa hareket ettirmek değil, belirlediğimiz X ve Y koordinatlarına getirmektir. Bu nedenle üçüncü linkteki sıfır left ve sıfır top değeri katmanı 0 yatay ve 0 dikey koordinatlarına getiriyor.
Ayrıca üçüncü linkte değinmek istediğim birşey daha var. Yerel kullanımda üç JavaScript komutundan herhangi birine iki iş birden yaptırılmıyor ve aynı tag içinde iki aynı komut bulunamıyor. Biz üçüncü linkte, tıklama yani onClick olayı sonucu, katmanı hem yatay hem de dikey yönde hareket ettirdik, yani bir tıklamaya iki iş yaptırdık. Bunu tek bir komut ile yapamayız, kalıbı hatırlayın hareket.style.top (katman.style.özellik) bu kalıba bir de left etiketi veremeyiz, o zaman kalıp bozulur ve hiç çalışmaz. Aynı tag içinde iki onClick komutu da kullanamayacağımıza göre bize yapacak tek bir seçenek kalıyor, o da komutun birini başka bir tag`e (ki örnekte bu P tag`i), diğerini ise linke vermek. Bunu yapmakla bir tıklama ile iki kuş vurmuş oluyoruz. (Demokraside çareler tükenmiyor.)
JavaScript`in yerel kullanımıyla yapılabilecek, Dinamik efekt örnekleri bunlardan ibaret. Gerisi sizin yaratıcı zekanıza kalmış. Başlarda belittiğim gibi Global JavaScript kullanmadan sadece yerel teknik ile birçok iş başardık. Bunu yapmak benim için bir hayli zor oldu, çünkü öğrendiğim örneklerde hep Global kullanım anlatılıyordu, bu yöntem de bir hayli karışık ve zor. Her örnektede belirttiğim gibi bazı JavaScript ve CSS efektleri Navigator `da çalışmıyor. Bu tür durumlarda bize sadece iki browserda da çalışan CSS efektleri kullanmak veya iki browser için ayrı ayrı sayfalar yapmaktan başka çare kalmıyor (Tasarımcılık zor zanaat). JavaScript içinse birçok durumda Global teknik kullanmak farz oluyor.
