Geri git   Van.GEN.TR Forum | Yerel Van Forumu > Bilgisayar > Programlama > Javascript

Cevapla
 
Konu Araçları Stil
Alt 05/04/07, 01:36   #1
gokhanaygun
Tuğgeneral
 
gokhanaygun - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Apr 2007
Bulunduğu yer: VAN
Yaş: 36
Mesajlar: 925
Tecrübe Puanı: 26 gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold
Standart Javascript ile DHTML (Dinamik HTML)

Merhaba arkadaşlar 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 bu işlemle yapılır.

Katman Özelliklerini Değiştirme
Katman sayfanın üzerinde ne sayfadan bağımsız ne de her yönüyle sayfaya 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.

Örnek 18:

<html>
<head><title>ornek18.html</title></head>
<body>
<div id="deneme" 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> deyimi ile başlar </div> deyimi ile kodunuz tamamlarsınız.

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 çıkmaktadır. IE ve NN 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=ye ni_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;

Örnek 19: Bu örnek yukarıdaki iki örneği de içermektedir.

<html>
<head><title>ornek19.html</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;
}//tara

function hareket1(){
degisim.left=100
degisim.top=100
}//hareket1

function hareket2(){
degisim.left=300
degisim.top=300
}//hareket2
-->
</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()">Burayı 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"

Örnek 20:

<html>
<head><title>ornek20.html</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"
}//sakla

function goster(){
var tarayici= navigator.appName
if (tarayici=="Netscape")
document.katman.visibility="show"
if (tarayici=="Microsoft Internet Explorer")
katman.style.visibility="visible"
}//goster
-->
</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.


Saygılarımla canlar....

Nacizhane programci gokhan...
gokhanaygun isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayısı: 187
Alt 16/06/07, 13:34   #2
LastDesiqner
Super Moderator
 
LastDesiqner - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Jan 2007
Bulunduğu yer: ναη
Mesajlar: 8.132
Tecrübe Puanı: 56 LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute LastDesiqner has a reputation beyond repute
Standart

emeğine sağlık kardeş... teşekkürler....
__________________
[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]
[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]


[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]
LastDesiqner isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayısı: 488
Takımınız:
Alt 01/08/08, 10:17   #3
Neutralizer
Yasaklı kullanıcı
 
Neutralizer - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Jan 2008
Bulunduğu yer: İstediğin yerden
Mesajlar: 1.890
Tecrübe Puanı: 0 Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute
Standart

emeğe sağlık
Neutralizer isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayısı: 317
Takımınız:
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Konu Araçları
Stil

Yetkileriniz
Yeni Mesaj yazma yetkiniz Aktif değil dir.
Mesajlara Cevap verme yetkiniz aktif değil dir.
Eklenti ekleme yetkiniz Aktif değil dir.
Kendi Mesajınızı değiştirme yetkiniz Aktif değildir dir.

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Gitmek istediğiniz klasörü seçiniz


Bütün Zaman Ayarları WEZ +3 olarak düzenlenmiştir. Şu Anki Saat: 13:32 .


Powered by vBulletin
Copyright © 2000-2007 Jelsoft Enterprises Limited.
Sitemap
6, 5, 3, 7, 8, 9, 10, 11, 12, 13, 14, 15, 113, 16, 17, 18, 19, 81, 20, 27, 22, 23, 24, 25, 26, 48, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 43, 136, 40, 58, 45, 42, 44, 46, 47, 53, 54, 55, 56, 57, 59, 60, 70, 61, 62, 63, 64, 65, 66, 68, 69, 71, 72, 74, 75, 76, 77, 78, 79, 80, 82, 83, 96, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 98, 97, 100, 101, 102, 103, 106, 104, 105, 112, 109, 108, 107, 110, 111, 114, 115, 118, 116, 117, 119, 148, 154, 124, 165, 122, 120, 123, 121, 150, 153, 125, 128, 129, 131, 132, 133, 134, 135, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 151, 149, 202, 175, 164, 152, 167, 155, 156, 157, 158, 159, 160, 161, 162, 163, 195, 169, 166, 168, 170, 171, 172, 199, 174, 173, 196, 200, 176, 177, 180, 178, 179, 182, 189, 187, 184, 186, 191, 192, 193, 194, 197, 198, 201, 203, 229, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 236, 231, 232, 233, 234, 235, 237, 240, 239, 241, 243, 242, 244,