JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20.6 Sayfa 2

20.6.2 - JavaScript Resim Rolloverleri (İki Resim Kullanlanlar)

Rollover başına sadece iki resim kullanan rollover programının yapısı prensip olarak daha önce incelenmiş olan üç resim kullanılan rollover programları ile aynıdır. Özellikle hızlı bağlantılarda, kullanıcının bağlantıyı tıkladığında ortaya çıkan click resminin görüntülenme şansı hemen hemen hiç olmayabilir. Bağlantıya tıklandığında, sayfa hızla yeni adrese hareket eder ve bağlantı resmi görünümden kalkar. Bu durumda, sadece normal ve hover (mouseover) resimlerinden oluşan iki resimle rollover etkisi sağlanabilir. Resimlerin uzak bilgisayardan kullanıcı bilgisayarına indirilerek görüntülenmeye hazır olarak bekletilmesine reim önbelleklenmesi denildiğini ve resim değişimi (swap) olayının titreşim (flicker) olmadan gerçekleşmesini sağladığını biliyoruz.

Bu çalışmada önbellekleme iki yöntemle gerçekleştirilmektedir. İlk yöntem, resimlerin tümünü sayfa kodlarına indirerek kullanıcı bilgisayırının belleğinde saklanmasını sağlayan yöntemdir. BU yöntemde sayfanın rollover resimleri sırası ile sayfa kodlarına indirilmekte ve görüntülenme, kullanıcı etkisi ile, JavaScript adımları ile sağlanmaktadır. Bu konudaki ilk uygulamanın sayfa kodlarının rollover resimlerini içeren kısmı aşağıda görülmektedir:

<p>
<span class="pl-200"><a href="#"><img id="geri1" src="../images/geri1.png" alt="geri1" height="51" width="31"><img 
id="geri2" src="../images/geri2.png" alt="geri2" height="1" width="1"></a></span>
<span class="pl-100"><a href="#"><img id="ileri1" src="../images/ileri1.png" alt="ileri" height="51" width="31"><img 
id="ileri2" src="../images/ileri2.png" alt="ileri2" height="1" width="1"></a></span>
 </p>
		

Bu konudaki bir program aşağıda görülmekte ve bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

function rollover3(resimId,resim2Id) {
var resim = document.getElementById(resimId),
resim2 = document.getElementById(resim2Id),
kaynak = resim.getAttribute('src'),
kaynak2 = resim2.getAttribute('src');

resim2.setAttribute('style', 'display:none;');

function mouseOut() {
resim.setAttribute('src', kaynak);
}

function mouseOver() {
resim.setAttribute('src', kaynak2);
}

function onClick() {
resim.setAttribute('src', kaynak);
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim.addEventListener('mouseover', mouseOver, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim.attachEvent('onmouseover', mouseOver);
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim.addEventListener('mouseout', mouseOut, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim.attachEvent('onmouseout', mouseOut);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim.addEventListener('click', onClick, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim.attachEvent('onclick', onClick);
}
}


function başlat() {
rollover2('ileri1', 'ileri2');
rollover2('geri1', 'geri2');
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

Yukarıdaki kendi kendine yeten program, eğer bdelib.js kitaplığı ile birlikte kulanılacaksa, yazılımı aşağıda görüldüğü gibi, hissedilir şekilde hafifleyecektir.

/* <![CDATA[  */

function rollover2(resimId,resim2Id) {
var resim = document.getElementById(resimId),
resim2 = document.getElementById(resim2Id),
kaynak = resim.getAttribute('src'),
kaynak2 = resim.getAttribute('src');

resim2.setAttribute('style', 'display:none;');

function mouseOut() {
resim.setAttribute('src', kaynak);
}

function mouseOver() {
resim.setAttribute('src', kaynak2);
}

function onClick() {
resim.setAttribute('src', kaynak);
}

olayDinleyicisiEkle(resim,'mouseout', mouseOut);

olayDinleyicisiEkle(resim,'mouseover', mouseOver);

olayDinleyicisiEkle(resim,'click', onClick);

}
		
function başlat() {
rollover2('ileri1', 'ileri2');
rollover2('geri1', 'geri2');
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);
		

Eğer, rollover2() programı da, bdelib.js kitaplığına alınırsa, sayfadaki rollover etkisi sadece rollover2() fonksiyonun çağrılması ile gerçekleşebilir. Bu konudaki bir programın, kodları aşağıda görülmekte ve bu program bağlantılı olduğu uygulama sayfasında, çalışmaktadır.

/* <![CDATA[  */


function başlat() {
rollover2('ileri1', 'ileri2');
rollover2('geri1', 'geri2');}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]>  */

Aynı programın sayfanın tüm rollover etkisi sağlanacak resimlerini tek defada saptayacak otomasyona sahip bir sürümü de kendi kendine yeten bir program olarak aşağıda görülmektedir. Bu program bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

...

function rolloverYapBirinciYöntem2Resim(resimDizisi) {
var uzunluk = resimDizisi.length, j = 0;

for (var i = 0; i < uzunluk / 3; i++ ) {
j = j + i;
rollover2(resimDizisi[j], resimDizisi[j + 1], resimDizisi[j + 2]);
j = j + 1;
}
}

function başlat() {
var resimler = new Array('ileri1', 'ileri2', 'ileri3, 'geri1', 'geri2', 'geri3');
rolloverYapBirinciYöntem2Resim(resimler);
}

...

/* ]]>  */
		

Eğer bdelib.js kitaplığından yararlanmak istenirse, rolloverYapBirinciYöntem2Resim() fonksiyonunun da bdelib.js kitaplığına aktarılması ile, bir sayfanın tün rollover etkileri, aşağıdaki programda görüldüğü gibi, tek bir fonksiyonla çözümlenebilir. Bu prrogram, bağlı olduğu sayfada çalışmaktadır.


/* <![CDATA[  */

function başlat() {
var resimler = new Array('ileri1', 'ileri2', 'ileri3, 'geri1', 'geri2', 'geri3');
rolloverYapBirinciYöntem2Resim(resimler);
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]>  */
				
		

Rollover esimlerinin önbelleklenmesi için ikinci bir yolun kullanıcı tanımlı yeni bir Resim nesne sınıfı yaratılması olduğunu daha önce görmüştük. Bu yöntemin iki tane rollover resmi ile uygulandığı kendi kendine yeten bir programın yazılımı aşağıda görülmektedir. Bu program, bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

function Resim(yer) {
var içResim = document.createElement('img');
içResim.setAttribute('src', yer);
this.kaynak = içResim.getAttribute('src');
}

function rollover2Resim(res1, res2) {
var resim1 = document.getElementById(res1),
kaynak1 = resim1.getAttribute('src'),
resim2  = new Resim(res2);

function mouseOut() {
resim1.setAttribute('src', kaynak1);}

function mouseOver() {

resim1.setAttribute('src', resim2.kaynak);
}

function onClick() {

resim1.setAttribute('src', kaynak1);
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('mouseover', mouseOver, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onmouseover', mouseOver);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('mouseout', mouseOut, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onmouseout', mouseOut);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('click', onClick, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onclick', onClick);
}
}

function başlat() {
rollover2Resim('ileri1', '../images/ileri2.png');
rollover2Resim('geri1', '../images/geri2.png');
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}


/* ]]>  */

Bu programın çalıştığı sayfa kodlarında, sadece tek bir resim görülmekte, rollover resimleri JavaScript programının belleğinde saklanmaktadır. Sayfanın rollover resimlerini içeren kodları aşağıda görülmektedir:


<p>
<span class="pl-400"><img id="geri1" src="../images/geri1.png" alt="geri1" height="51" width="31"></span>
<span class="pl-100"><img id="ileri1" src="../images/ileri1.png" alt="ileri1" height="51" width="31"></span>
 </p>
		
		

Eğer rollover2Resim() programı, bdelib.js program kitaplığına alınacaksa yazılımı önceden yerleştirilmiş yardımcı fonksiyonlardan yararlanarak, aşağıda görüldüğü gibi kısaltmak olanağı bulunacaktır.

function rollover2Resim(res1, res2) {
var resim1 = document.getElementById(res1),
kaynak1 = resim1.getAttribute('src'),
resim2  = new Resim(res2);

function mouseOut() {
resim1.setAttribute('src', kaynak1);}

function mouseOver() {

resim1.setAttribute('src', resim2.kaynak);
}

function onClick() {

resim1.setAttribute('src', kaynak1);
}
		
function onClick() {
resim1.setAttribute('src', kaynak3);
}

olayDinleyicisiEkle(resim1,'mouseout', mouseOut);

olayDinleyicisiEkle(resim1,'mouseover', mouseOver);

olayDinleyicisiEkle(resim1,'click', onClick);

}
		

Eğer rollover2Resim() programı da bdelib.js kitaplığına alınırsa, iki resimli bir rollover etkisi, sayfadaki her resim için ayrı ayrı belirtilerek sadece bu fonksiyonu çağırmakla oluşturulabilir. Bu konudaki bir program aşağıda görülmekte ve bağlantılı olduğu sayfada çalışmaktadır.


/* <![CDATA[  */

function başlat() {
rollover2Resim('ileri1', '../images/ileri2.png');
rollover2Resim('geri1', '../images/geri2.png');
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]>  */
		

Eğer sayfadaki tüm istenen resimlerinin tek bir fonksiyonla rollover etkisi kazanması istenirse, bu işlevi sağlayacak otomasyon fonksiyonunu içeren, kendi kendine çalışan bir programın kodları aşağıda görülmektedir. Bu kodlar bağlantılı oldukları, sayfada çalışmaktadır.

/* <![CDATA[  */

function Resim(yer) {
var içResim = document.createElement('img');
içResim.setAttribute('src', yer);
this.kaynak = içResim.getAttribute('src');
}

function rollover2Resim(res1, res2) {
var resim1 = document.getElementById(res1),
kaynak1 = resim1.getAttribute('src'),
resim2  = new Resim(res2);

function mouseOut() {
resim1.setAttribute('src', kaynak1);}

function mouseOver() {

resim1.setAttribute('src', resim2.kaynak);
}

function onClick() {

resim1.setAttribute('src', kaynak1);
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('mouseover', mouseOver, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onmouseover', mouseOver);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('mouseout', mouseOut, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onmouseout', mouseOut);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
resim1.addEventListener('click', onClick, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
resim1.attachEvent('onclick', onClick);
}
}

function rolloverYap2(resimDizisi) {
var uzunluk = resimDizisi.length, j = 0;

for (var i = 0; i < uzunluk / 2; i++) {
j = j + i;
rollover(resimDizisi[j], resimDizisi[j + 1]);
j = j +1;
}
}


function başlat() {
var resimler = new Array('ileri1', '../images/ileri2.png', 'geri1', '../images/geri2.png');
rolloverYap2(resimler);
}

// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat, false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}


/* ]]>  */

Eğer bdelib.js program kitaplığından yararlanmak istenirse, rollover2Resim() fonksiyonu, kitaplık şekliyle, bdelib.js alınmış olduğundan, sadece, rolloverYap2() fonksiyonunun, bdelib.js kitaplığına alınması ile, sayfadaki tüm rollover etkisine sahip olması istenen resim bağlantılarının tek bir fonksiyonla belirtilmesi olanağı bulunacaktır. Bu konudaki bir program aşağıda görülmekte ve bağlantılı olduğu sayfasında çalışmaktadır.


/* <![CDATA[  */

function başlat() {
var resimler = new Array('ileri1', '../images/ileri2.png', 'geri1', '../images/geri2.png');
rolloverYap2(resimler);}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]>  */
		

Burada sunulan her rollover programı, görevini yapabilmekte ve sorunsuz olarak resim önbelleklenmesini gerçekleştirebilmektedir. bu programlardan her birisi sayfaya JavaScript kullanımı ile rollover etkisi sağlamak için kullanılabilir. Bunlar arasında sayfa yapısını etkilemeyen ve resimleri JavaScript program belleğinde saklayan sürümlerin yeğ tutulmasının doğal olarak daha kullanışlı olabileceği düşünülebilir.

20.6.3 - CSS Resim Rolloverleri

CSS sayfanın doğal ve kapaıtlamaz bir programlama ortamı olduğundan, sayfanın erişilebilirliğini azaltmadığını daha önce görmüştük. Bu nedenle olanaklar elverdiğinde, JavaScript yerine CSS kullanılmasında yarar bulunmaktadır. JavaScript kadar rahat olmamakla birlikte, resim rolloverleri sadece CSS kullanılarak düzenlenebilir. Bu konuda literatürde bulunan en etkili örneklerden birisi Trifecta butonu olarak adlandırılan uygulamadır. Trifecta butonu, webcredible.co.uk tarafından geliştirilmiştir. Bu program, iki tane rollover resmine (normal ve hover) gereksinme gösterir. Yazarlar bu yöntemin, önbellekme gerektirmediğini resimlerin titremeyeceğini ve arama motorlarında sayfanın bulunabilirliğini arttıracağını belirtmektedirler.

Trifecta butonu programı temel alınarak geliştirilmiş bir uygulama düzenlenmiştir. Bu sayfanın incelenmesinde düğmelerin arka planının (background) resimler olduğunun unutulmaması gerekir. Bu şekilde, IE 8 de yuvarlatılmış köşeli kutular gibi görülen arka planlar kullanılabilmektedir. Bu programda örneği verilmiş olan CSS uygulamaları ile her türlü resmin rollover amacı ile salt CSS kullanılarak gerçekleştirilebileceğini görülmektedir. Yine de eğer salt düz arka plan rengi kullanılacaksa, resim yerine salt CSS sekmeleri kullanılabilir. Bu sekmelerin kullanımı da biraz ileride açıklanacaktır. Günümüzde IE 8 sadece CSS 2.1 de belitilen dikdörtgen kutuları destekleyebilmektedir. Bu nedenle günümüzde CSS sekmeleri IE 8 için, henüz dikdörtgen arka planlar ile sınırlı kalacaktır. CSS3 tarafından tanımlanan yuvarlatılmış kenarlar (bu uygulamadaki gibi) günümüzde sadece FireFox ve Safari ve Opera tarafından desteklenebilmektedir. Belge çözümleyicilerle çalışıldığında, yuvarlatılmış kenarlar için, resim rolloverlerine gerek olmayacak ve sadece CSS sekmeleri yeterli olacaktır. Fakat günümüzde IE 8 desteği olması için, yuvarlatılmış kenarlar için, henüz resim CSS rolloverlerine gerek duyulmaktadır.

20.6.4 - Metin Tabanlı CSS Sekme Navigasyon Panelleri (CSS Tabs)

Navigasyon amacı ile resim rolloverlerinin kullanımı sitenin çekiciliğini ve kullanılabilirliğini arttırabilmesine karşın, JavaScript kullanılması gereğinden dolayı, sitenin erişibilirliğini azaltır. ve bu yüzden, CSS rollover ve metin tabanlı navigasyon sekmeleri (CSS Tabs) tercih edilmelidir. Son zamanlarda gerçekleştirilen sitelerde yaygın olarak, JavaScript'ten kaçma ve CSS navigasyon yöntemleri kullanma eğilimi bulunmaktadır. CSS navigasyon çubularında, resim rolloverleri de JavaScript'e gerek olmaksıın uygulanabilir. Buna rağmen, resimlerin indirilmesi sırasında yaşanabilen titreme ve gecikme sorunları, vavigasyon amacı ile resim kullanımından kaçınılmasını zorlamaktadır. Burda en geçerli ve en erişilebilirliği azaltmayan çözüm, son günlerin gözdesi metin tabanlı CSS navigasyon çubuklarıdır.

Metin tabanlı CSS navigasyon panellerine gelişmiş bir örnek, Apple i-Tunes navigasyon çubuğundan esinlenen Western Civilization tarafından gerçekleştirilen bir tasarımdır. Bu tasarımın özelliği, hem CSS21. hem CSS3 hem de Safarı (webkit) için özel ifadeler içermesidir. Tasarım aşamalı gelişme (progressive enhancement) kuramına uyacak şekilde gerçekleştirilmiştir. Henüz sadece CSS2.1 öğelerini tanıyabilen IE 8, bu navigasyon çubuğunun genel işlevlerini değerlendirebilmektedir. Firefox 3.5 bu tasarımın CSS^de geçerli olan yuvarlatılmış köşelerini değerlendirebilmekte, Safari 4 ise, tasarımın gradient renklendirme dahil tüm güzelliğini aksettirmektedir. Bu tasarımın daha ileriye götürülmüş şekli bu çalışmada gerçekleştirilmiş ve bir uygulama sayfasında uygulanmıştır. Bu sayfanın css kodlarında küçük değişiklikler yapılarak istenildiği gibi, değişik renk ve boyutlarda navigasyon panelleri oluşturulabilir.

Aynı navigasyon paneliin dik olanının oluşturulması son derece kolaydır. sadece float : left; ifadesi float : bottom ile değiştirilerek, ile aynı panelin dik olan sürümü oluşturulmuştur. Bu sayfanın tüm (X)HTML kodları bir öncesi ile aynıdır. Sadece yeni sayfanın, CSS kodlarının bir satırında float : bottom; olarak değişim yapılmıştır.