Bu kısımda Javascript ile Katman(layer)
özelliklerinin nasıl değiştirilebileceğini göreceğiz. Javascript
bize Html sayfamızı oluşturan önemli unsurlardan biri olan layer(katman)
ların tüm özelliklerini değiştirmemize olanak sağlar. Ayrıca hemen
her yerde gördüğünüz resim değiştirme tekniğini de göreceğiz.
9.1 Katman Özelliklerini Değiştirme
İşe katman nedir sorusuyla başlayalım.
Katman adı üzerinde sayfamızın üzerinde ne sayfadan bağımsız ne de
her yönüyle sayfamıza bağlı bir unsurdur. Katman kullanarak
istediğimiz herhangi bir yapıyı (yazı,resim,video,form) sayfamızın
istediğimiz yerine koordinatları vermek koşulu ile
yerleştirebiliriz. Zaten katmanın kullanım alanı en çok budur.
Şimdi bir katman oluşturalım ve değiştirilebilir özelliklerini
görelim.
<html>
<head><title>Layer</title></head>
<body>
<div id="denem" style="position:absolute ; left:100px ; top:200px;
width:300px ; height:400px ; visibility:visible" >
Su anda bir katman(layer)in icerisindeyim
</div>
</body>
</html>
Layer oluşturmak istediğinizde <div>
etiketi ile başlar </div> etiketi ile kodunuz
tamamlarsınız. Şimdi katman özelliklerine geçelim :
id : Katmanın ismi
style : Katmanın özelliklerini belirtmek için
absolute : Katmanın koordinatlarının kesin olacağını
belirler
left : Katmanın soldan kaç piksel sonra başlayacağını
belirler
top : Katmanın üstten kaç piksel sonra başlayacağını
belirler
width : Katmanın kaç piksel genişliğinde olacağını belirler
height : Katmanın kaç piksel boyunda olacağını belirler
visibility : Katmanın görünür mü görünmez mi olacağını
belirler
Şimdi de Javascript komutlarıyla bu
özelliklerin nasıl değiştirildiğini görelim.
Fakat burada karşımıza bir sorun çıkmakta.
Internet Explorer ve Netscape tarayıcılarının doküman nesne
modelleri farklı olduğundan katmana ulaşma teknikleri de
farklıdır. Internet Explorer kod tekniği katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer;
Örnek :
deneme.style.left=50px;
Netscape Navigator kod tekniği:
document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer;
Örnek :
document.deneme.left=50px;
Şimdi bir örnekle bir katmanın yerinin nasıl
değiştirilebileceğini görelim.
<html>
<head><title>Katman</title>
<script language="javascript1.2">
<!--
function tara()
{ var tarayici= navigator.appName
if (tarayici=="Netscape") degisim = document.katman;
if (tarayici=="Microsoft Internet Explorer") degisim = katman.style; }
function hareket1() {
degisim.left=100
degisim.top=100 }
function hareket2() {
degisim.left=300
degisim.top=300 }
-->
</script></head>
<body onLoad="tara()">
<div id="katman" style="position:absolute ; left:400px; top:10px">
Bu katmanin yeri degisecek
</div>
<p><p><p>
<a href="javascript:hareket1()">Burayı tıklayın ve katmanınız 100x100'e gitsin</a><br>
<a href="javascript:hareket2()">Burayi tıklayın ve katmanınız 300x300' gitsin</a>
</body></html>
Buradaki örnekte olduğu gibi sizde katmanın
diğer özelliklerini (width,height) değiştirebilirsiniz. Fakat
görünebilirlik özelliği için özel bir durum vardır. Katman
özelliklerine erişimde olduğu gibi bu özellikte de Internet
Explorer ve Netscape Navigator farklılıkları vardır.
Internet Expolorer için Görünebilirlik
özelliği
Katmanı görünebilir kılmak için:
katman_adı.style.visibility="visible"
Katmanı gizleyebilmek için. katman_adı.style.visibility="hidden"
Netscape Navigator için Görünebilirlik
özelliği Katmanı görünebilir kılmak için:
document.katman_adı.visibility="show"
Katmanı gizleyebilmek için:
document.katman_adı.visibility="hide"
Şimdi de bununla ilgili bir örnek yapalım.
<html>
<head><title>Katman</title>
<script language="javascript1.2">
<!--
function sakla()
{ var tarayici= navigator.appName
if (tarayici=="Netscape") document.katman.visibility="hide"
if (tarayici=="Microsoft Internet Explorer") katman.style.visibility="hidden" }
function goster()
{ var tarayici= navigator.appName
if (tarayici=="Netscape") document.katman.visibility="show"
if (tarayici=="Microsoft Internet Explorer") katman.style.visibility="visible" }
-->
</script></head>
<body>
<div id="katman" style="position:absolute ; left:400px; top:10px">
Bu katmanin tikladiginizda yok olacak
</div><p><p><p>
<a href="javascript:sakla()">Burayi tiklayin ve katmaniniz yok olsun</a><br>
<a href="javascript:goster()">Burayi tiklayin ve katmaniniz geri gelsin</a>
</body></html>
Sizde bu tıklama özelliklerin değil de
onMouseOver ve onMouseOut olay yönlendiricilerini kullanarak çok
daha güzel şeyler üretebilirsiniz.
|