DHTML Hakkında Kısa Bilgi ve Filtre Örnekleri

Tüm anlatımlarda “sayfa” web sayfası(dokümanı) manasında, “eleman” web sayfasındaki bir nesne(textbox,table vs.) manasında, “nitelik” elemanın özelliği(attribute) manasında kullanılmıştır. Ayrıca aksi belirtilmedikçe tüm örnekler Cross-Browserlar ile çalışır biçimde anlatılacaktır.

Tarayıcılara Özgü Standartlar:

Netscape Navigator 4.x

Cross-Browser

Internet Explorer 4.x

  • JSS (JavaScript Style Sheets)
  • Katmanlar
  • CSS1
  • CSS2
  • CSS Positioning
  • JavaScript
  • Görsel Filtreler
  • Dinamik CSS

CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative)

  • left – elemanın sol pozisyonu
  • top – elemanın üst pozisyonu
  • visibility – eleman görünür mi görünmez mi
  • z-index – elemanın istif sırası
  • clip – elemanı belli yerlerinden kesme
  • overflow – içerik taşmaları kontrolü

Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır.

Filtre

Argüman

Açıklama

Örnek

alpha opacity

finishopacity

style

startx

starty

finishx

finishy

Elemanın opaklığını ayarlamanızı sağlar filter:alpha(opacity=20, finishopacity=100, style=1, startx=0,

starty=0, finishx=140, finishy=270)

blur add

direction

strength

Elemanın netliğini ayarlamanızı sağlar filter:blur(add=true, direction=90, strength=6);
chroma color Belirtilen rengi transparan yapar filter:chroma(color=#ff0000)
fliph yok Elemanı yatay döndürür filter:fliph;
flipv yok Elemanı dikey döndürür filter:flipv;
glow color

strength

Elemana glow efekti verir filter:glow(color=#ff0000, strength=5);
gray yok Elemanı siyah-beyaz hale getirir filter:gray;
invert yok Elemanın renklerini ve aydınlığını ters çevirir filter:invert;
mask color Elemanı belirtilen arkaplan rengyile ve transparan ön plan rengiyle kaplar. filter:mask(color=#ff0000);
shadow color

direction

Elemana gölge ekler filter:shadow(color=#ff0000, direction=90);
dropshadow color

offx

offy

positiv

Elemana dropshadow ekler filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave add

freq

lightstrength

phase

strength

Elemanı dalgalı hale getirir filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray yok Elemanı ters renk ve aydınlıkla siyah-beyaz hale getirir filter:xray;

DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x  ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim:

<html>

<head>

<span>Deneme Yazısı</span>

<script >

document.getElementById(‘text’).style.color=”red”

</script>

</body></html>

HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)

Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.

Event (Olay) …… olduğunda olur
onabort sayfa yüklenmesi iptal edilirse
onblur eleman terk edilirse
onchange elemanın değeri değiştirilirse
onclick elemana tıklanırsa
ondblclick elemana çift tıklanırsa
onfocus eleman aktive edilirse
onkeydown tuşa basılı tutulursa
onkeypress tuşa basılırsa
onkeyup tuşa basıp bırakılırsa
onload sayfa yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez.
onmousedown fare butonuna basılırsa
onmousemove fare imleci bir elemanın üzerinde hareket ederse
onmouseover fare imleci bir elemanın üzerine gelirse
onmouseout fare imleci bir elemanın üzerinden ayrılırsa
onmouseup fare butonuna basılıp bırakılırsa
onreset form resetlenirse
onselect sayfadan bir içerik seçilirse
onsubmit form gönderilirse
onunload sayfa kapatılırsa

    Yorum bırakın