JavaScript ve DHTML #12
JavaScript ile katmanların(layer) neredeyse bütün özelliklerini değiştirebiliriz. Bu özelliği onMouseOver, onClick gibi olaylarla birleştirip çok iyi sonuçlar alabilirsiniz. İşe başlamadan önce katmanları tanıyalım:
Web sayfalarımızda <div> ve <layer> etiketlerini kullanarak katmanlar oluşturabiliriz. Fakat ne yazık ki Explorer <layer> etiketini tanımaz. Bu nedenle kullanımı biraz daha zahmetli olan <div> etiketini kullanacağız.Katmanlar sayfadan bağımsızdırlar, Javascript ile boyutlarını, renklerini hatta görünürlüklerini değiştirmemize olanak sağlarlar. Şimdi önce bir katman oluşturalım, sonra da Javascript ile katmanların değiştirebieceğimiz özelliklerini görelim.
Kod:
<html>
<head>
<title>Katman</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<div id="katman" style="position:absolute; left:50; top:200; width:100; height:200;
visibility:visible; background-color:teal">Burası bir katman</div>
</body>
</html>
id:Katmanın adı.
style:Katmanın aşağıda listelenen stil özellikleri
position: Katmanın yeri kesin olarak belirtilecekse absolute, göreli olarak belirtilecekse relative değerini alır.
top:Katmanın browser penceresinin üst kenarından uzaklığı
left:Katmanın browser'ın sol kenarından uzaklığı
width:Katmanın genişliği
height:Katmanın yüksekliği
Katman tekniğini kullanılırken Netscape ve Explorer farkını aklımızda bulundurmalıyız. Aşağıda Explorer için yazım kuralını görüyoruz.
katmanAdı.style.DeğişecekÖzellik=yeniDeğer
Netscape için yazım kuralı ise şöyledir:
********.katmanAdı.DeğişecekÖzellik=yeniDeğer
Şimdi bu tekniği örneklerle daha iyi anlayalım:
Kod:
<html>
<head>
<title>Katman</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<script language="JavaScript1.2">
<!--
function tani()
{
if(navigator.appName=="Netscape")genislik=********.katman
if(navigator.appName=="Microsoft Internet Explorer")genislik=katman.style
}
function genisle()
{
genislik.width=400
}
-->
</script>
</head>
<body onLoad="tani()">
<div id="katman" style="position:absolute; left:200; top:30; width:100; height:200;
visibility:visible; background-color:teal">Bu katman genisleyecek</div>
<form name="form1">
<input type="Button" onclick="genisle()" value="Genişlet">
</form>
</body>
</html>
ALINTI THT.
