JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20.6 Sayfa 1

20.6 - Resimler ile Gerçekleştirilen Uygulamalar

Resiimler web sayfalarında en etkili iletişim araçlarından biridir. Her türlü içeriğin görsel açıklmaları resimler yardımı ile gerçekleştirilir. Burada resimlerin kullanımı ile ilgili uygulama örnekleri incelenecektir.

20.6.1 - JavaScript Resim Rolloverleri (Üç Resim Kullanlanlar)

Resim rolloverleri, bir bağlantı resminin, yani kullanıcının tıklaması ile sayfanın başka bir sayfaya gitmesini sağlayan kullanıcıyı uyarmak için başka resimlerle yer değiştirmesidir Örnek olarak bir bağlantı resminin mouse uzakta iken arkaplan rengi yeşil ise, mouse üzerine geldiiğinde JavaScript programı çalışarak arkaplan rengini maviye dönüştürebilir. Aynı şekilde, ve kullanıcı resmin üzerine tıkladığında JavaScript programı bu rengi kırmızıya dönüştürebilir . Bu tür programlara rollover programları adı verilmektedir. Genel olarak bir resim rolloveri için üç tane aynı boyutta fakat farklı resim hazırlamak gerekmektedir. Bunlardan birisi mouse uzakta ilen (mouseout), ikincisi mouse üzerinde iken (mouseover) ve üçüncüsü kullanıcı resme tıkladığında (onclick) görüntülenir.

Rolloverin sayfanın bağlantılarının çekiciliğini ve kulanışlılığını arttıdığı kesindir. Fakat, resimlerle JavaScript kullanılması ile rollover etkisinin sağlanmasında, önemli sorunlarla karşılaşılır.

Sorunlardan bir tanesi, JavaScript ile gerçekleştirilen resim rolloverlerinde, JavaScript programının sayfanın doğal kodlayıcıları olan (X)HTML + CSS çiftinin dışında olmasıdır. Yani, JavaScript yorumlayıcısı kullanıcı tarafından devreden çıkarılabilir ve bu durumda sayfada hiçbir JavaScript etkisi gerçekleşemez. Bu sorunun rollover kullanımını fazla engelleyici bir yönü yoktur, çünkü JavaScript yorumlayıcısının kapatılmış olması, bağlantının çalışmasını engellemez, sadece rollover resimlerinin değişimini engeller, bunun da bağlantının çalışmasını engeller bir yönü bulunmamaktadır. Yani rollover olaylarını gerçekleştiren JavaScript programları, sayfayı aşamalı olarak geliştirir niteliktedir ve sayfa içinde farkedilmeden kaybolurlar.

Rollover etkisinin JavaScript programları ile, resim değişimi yöntemi ile sağlanmasının ikinci ve esas engelleyici sakıncası, rollover etkisinin resim değişimi ile sağlanması ve resimlerin sayfadaki metinlere göre çok daha yavaş indirilebilmeleridir. Resimler büyük çapta verilerdir, bu nedenle metinlere göre daha yavaş indirilebilirler ve sayfada metinlerden sonra görüntülenirler. Bunun sonucu olarak, sayfa başlangıçta hoş olmayan açıklıklarla ve buralarda görüntülenen bağlantı resimlerinin metin açıklamaları ile görüntülenir. Bu sorun temel ve rollover resimlerinin kullanımını engelleyici niteliktedir. Aslında tüm sayfa resimleri için bu sorun geçerli olmasına karşın, özellikle rollover resimleri için çok daha rahatsız edici olabilir. Bu sorunun aslında basit bir çözümü yoktur ve karmaşık tekniklerle, 'Bekleyiniz Sayfa Hazırlanıyor !' tipi mesajlar görüntülerek sayfanın ancak düzenli hale geldiğinde kullanıcının görümüne sunulması sağlanabilir. Bu çözüm de yerine göre kullanıcıları rahatsız edici olarak nitelendirilebilir.

Rollover resimlerinin kullanıcının etkisine yavaş tepki vermelerinin engelenmesinin bir yolu, resimlerin her çağrılmada uzak sunucudan değil, sadece başlangıçta indirilerek, kullanıcı makinesinin program belleğinde saklanmasının sağlanmasıdır. Ön bellekleme (preloading) olarak adlandırılan bu teknik, rollover resimlerinin sayfa indirilmesi ile beraber, kullanıcının geçici program belleğine (stack bellek) indirilmesi ve kullanıcının her çağrısında uzak sunucudan indirilmeye kıyaslandığında çok daha hızlı olarak öngörülen resim değişiminin sağlanabilmesidir. Buna rağmen, resim önbelleklemesi, sayfanın başlangıçtaki kötü görünümünü engelleyemez.

Günümüzde, internet erişiminde sağlanan yüksek hızlı bağlantılar, rollover kullanımında, sayfanın başlangıçtaki kötü görününümü neredeyse ortadan kaldırabilmekte ve rollover resimlerinin önbelleklenmeleri çok daha hızılı gerçekleşebilmektedir. Günümüzde sağlanan hızlı bağlantılar, eskiden yavaş bağlantılarda yaşanabilen bu görüntü gecikmelerini gittikçe ortadan kaldırmaktadırlar. Yine de olanaklar oldukça bir önlem olarak resim önbelleklenmesinin yararı tartışılmaz.

Bağlantılar için resim rolloverlerinin kullanılması, aynı etkinin metin bağlantıları kullanılarak CSS teknikleri uygulanarak elde edilebilmesi ile biraz daha azalmıştır. Gerçekten metin mesajları ile rollover etkisi CSS teknikleri ile elde edilebildikten sonra, salt metin içeren resimlerle JavaScript rollover programlarının uygulanması gereği kalmamıştır. CSS sayfanın doğal programlama ortamıdır ve kullanıcı tarafından kapatılması olanağı yoktur. Bu nedenle CSS sekmeleri (CSS tabs) adı verilen CSS rolloverlerinin sayfada çalışamaması olasılığı bulunmamaktadır. Bu çalışmada, hatta izlediğiniz bu sayfada bile çoğu bağlantılarda metin temelli CSS rolloverleri kullanılmıştır.

JavaScript kullanılan bir resim rollover programında, pensip olarak üç tane resim kullanılır. bunlardan ilki sayfanın ilk görüntüsündeki (mouseout) resmidir. İkinci resim, kullanıcı bağlantını üzerinde mouse ile geziindiğinde mouseout resmi ile yer değiştiren (mouseover) resmidir. Üçüncü ve son resim de, kullanıcı bağlantıyı çalıştırmaya karar verip bağlantı üzerine tıklayınca, mouseover resmi ile yer değiştiren (onclick) resmidir.

JavaScript roloverlerinde resim önbelleklenmesin güncel yöntemleri üzerinde detaylı bir inceleme yararlı olacaktır. Esi DHTML günlerinde kullanılan öntanımlı image() nesnesi, ne ECMA -262 çekirdek JavaScript spesifikasyonu, ne de W3C-DOM çekirdek spesifikasyonlarında tanımlı standart bir öntanımlı nesne tipi değildir. Bu nesne tipi, belge çözümleyicilerin özel tanımlı bir nesne tipidir ve günümüzde geçmişe uyum adına tüm belge çözümleyicilerce desteklenmektedir. Her zaman beliritildiği gibi, bu gibi zoraki desteklerin ne kadar süreceği belli olmadığından, ciddi bir programcılık çalışmasında, uzun vadede programın sürekliliğinin sağlanması açısından temel standartların dışındaki öğelere yer verilmemesi uygun olacaktır.

Resim nesnesi devreden çıkınca, önbellekleme için, tek alternatif, resimlerin sayfa kodlarına yerleştirilmesi fakat daha sonra rollover etkisi ile görüntülenecek olanları, CSS adımları ile display : none olarak belirtmektedir. Bunun da sakıncası, belge çözümleyicilerin yeni sürümlerinde, görüntelenmeyecek öğelerin indirilmesine kısıt getirilmekte olmasıdır. Bu açıdan, bu sakıncanın giderilmesi için, sayfa kodlarına eklenen, daha sonra görüntülecek resimlerin 1px yükseklik ve genişlikle tanımlanması ve hiç farkedilmeyecek olan bu noktanın da istenirse, JavaScript adımları ile görüntülenmesinin engelenmesi yoluna gidilecektir. Bu şekilde, her rollover etkisinde, resimlerin uzak sunucudan değil, önbelleklendiği program belleğinden çağrılarak, uzak sunucudan resmi indirmeden kaynaklanan olası bir görüntü bozulmasının önüne geçmeye çalışılacaktır.

Aşağıda kodları görülmekte olan programda, yukarıda açıklanan prensiplerin uygulandığı, üç resimli bir rollover etkisi gerçekleştirilmektedir. Bu programda, rollover resimleri, 1px boyutunda, görüntülenecek şekilde uzak sunucudan indirilmekte, bu 1px genişlik ve yüksekliğindeki nokta da JavaScript adımları ile görüntüden kaldırılmaktadır. Sayfanın resimlerin indirildiği kısmının (X)HTML kodları 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"><img 
id="geri3" src="../images/geri3.png" alt="geri3" height="1" width="1"></a></span>
<span class="pl-100"><a href="#"><img id="iler1" src="../images/ileri1.png" alt="ileri1" height="51" width="31"><img 
id="ileri2" src="../images/ileri2.png" alt="ileri2" height="1" width="1"><img 
id="ileri3" src="../images/ileri3.png" alt="ileri3" height="1" width="1"></a></span>
 </p>
		

Rollover etkisi, sayfaya yerleştirilmiş, dolayısı ile sayfanın cache belleğine alınarak önbelleklenmiş olan resimlerin, JavaScript program adımları igörüntülenmesi veya görüntüden kaldırılması ile kullanıcı bilgisayarı üzerinden gerçekleştirilmektedir. Resimler sadece başlangıçta ve sadece bir kez sunucu üzerinden sayfaya indirilmekte, JavaScript program adımları, sadece sayfada zaten i indirilmiş olan resimlerin görüntülenmesini veya gizlenmesini sağlamaktadır. Program, hiçbir kitaplığa bağlı olmadan tüm gereksinmelerini kendisi karşılayacak şekilde, bağımsız olarak çalışabilecek şekilde tasarlanmıştır. Programda sadece W3C-DOM ve standart çekirdek ECMAScript öğeleri kullanılmış ve bunların dışında, kullanımdan kaldırılmış veya markaya özel hiçbir öğeye yer verilmemiştir. Bu özelliği ile program, büyük bir olasılıkla sonsuza kadar belge çözümleyici desteği alabilecek bir program olarak nitelendirilebilir. Bu program, bağlantılı olduğu uygulama sayfasında çalışmakta ve tüm çok kullanılan belge çözümleyicilerin son sürümleri tarafından sorunsuzca desteklenmektedir.

/* <![CDATA[  */

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

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

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

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

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

// 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() {
rollover3('ileri1', 'ileri2', 'ileri3');
rollover3('geri1', 'geri2', 'geri3');
}

// 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 programda, sayfadaki her rollover için, rollover3() programının yeniden çağrılması gerekmektedir. Sayfadaki tüm rollover olaylarını tek defada oluşturabilecek bir otomasyon fonksiyonu yararlı olabilir. Üç resim kullanılan bir rollover etkisinin oluşturulması için kullanılabilecek bir otomasyon fonksiyonun yazılımı aşağıda görülmektedir:


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

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

Yukarıda kodları görülen, rolloverYapBirinciYöntem3Resim() otomasyon programı, sayfada rollover etkisi yaratılacak tüm resimlerin verilerini içeren bir resim dizisini argüman olarak almaktadır. Bu resim dizisi, üçlü gruplar (sekans) halindedir. Her grup bir rollover resiminin verielrini içermektedir. Dizideki sekansların hangi sıra ile verildiğinin bir önemi yoktur. Sadece her sekansın ilk elemanı başlangıçta görüntülenecek normal (mouseout) resiminin sayfadaki id değeri, ikinci elemanı mouseover (hover) resminin sayfadaki id değeri, üçüncü elemanı click resminin sayfadaki id değeri olmalıdır.

Otamasyonu da içeren kendi kendine yeterli bir üç resimli, birinci yöntem (yani sayfaya tüm rollover resimlerinin indirilip görüntülenmelerinin JavaScript program adımları ile gerçekleştirildiği ) bir rollover programının, kodları aşağıda görülmektedir Bu program bağlantılı olduğu uygulama sayfasında, çalışmaktadır.

/* <![CDATA[  */

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

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

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

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

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

// 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 ise

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 ise

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



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

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

function başlat() {
var resimler = new Array('ileri1', 'ileri2', 'ileri3, 'geri1', 'geri2', 'geri3');
rolloverYapBirinciYöntem3Resim(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);
}

/* ]]>  */
		

Yukarıdaki programda, tüm kodlar kendi kendine yeterlidir ve programın başka fonksiyon desteğine gereksinmesi yoktur. Kendi başlarına bağımsız olarak çalışabilen programların yazılımları yoğun olması ve her önceden hazırlanmış olan yardımcı fonksiyonlardan yararlanamamaları olacaktır. İlk iki örnekteki kendi kendilerine yeten programların bdelib.js fonksiyon kitaplığından yararlanmaları durumunda, eski fonksiyon tanımlarından yararlanılarak yazılımın hissedilir bir şekilde kısaltılması sağlanabilir. İBu çalışmadaki tüm uygulamalarda kullanılan, bdelib.js kitaplığındaki yerleşik yardımcı fonksiyonlardan yararlanılması durumunda, ilk uygulamanın yazılımında gerçekleştirilebilen kod ekonomisi aşağıda görülmektedir:

/* <![CDATA[  */

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

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

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

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

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

olayDinleyicisiEkle(resim,'mouseout', mouseOut);

olayDinleyicisiEkle(resim,'mouseover', mouseOver);

olayDinleyicisiEkle(resim,'click', onClick);

}
		
function başlat() {
rollover3('ileri1', 'ileri2', 'ileri3');
rollover3('geri1', 'geri2', 'geri3');
}

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

Eğer rollover3() fonksiyonu da bdelib.js kitaplığına alınırsa, her rollover etkisi için, sadece rollover3() fonksionunun çağrılması yeterli olur. Bu şekilde çalışan bir programın kodları aşağıda görülmektedir. Bu program, bağlantılı olduğu sayfada çalışmaktadır.


/* <![CDATA[  */

function başlat() {
rollover3('ileri1', 'ileri2', 'ileri3');
rollover3('geri1', 'geri2', 'geri3');
}

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

/* ]]>  */
		

Yukarıdaki programda görüldüğü gibi, 3 resimli bir JavaScript rolloverini, bdelib.js kitaplığından yararlanarak gerçekleştirmek için sadece rollover3() fonksiyonunu çağırmak yeterli olmaktadır.

Aynı şekilde, rolloverYapBirinciYöntem3Resim() otomasyon fonksiyonu da bdelib.js kitaplığına alınırsa, tüm sayfadaki üç resimli rollover etkilerini tek bir adımda tanımlama olanağı elde edilir. Bu son şeklin uygulandığı bir program aşağıda görülmekte ve bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */


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

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

/* ]]>  */
				

JavaScript kullanımı ile resim önbelleklemesinin gerçekleştirilmesi için uygulanabilecek başka bir yol, kendi özel Resim veri tipimizin yaratılarak rollover resimlerinin bu veri tipinin örnekleri olarak tanımlanmasıdır. Eskiden kullanılmakta olan markaya özel klasik Image() veri tipinin bir benzeri burada kullanıcı veri tipi olarak tanımlanmaktadır.

İlk yardımcı fonksiyonumuz, kullanıcı kaynaklı Resim nesne tipinin yapılandırıcısıdır. Bu yapılandırıcının yazılımı aşağıda görülmektedir:

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

Bu yapılandırıcının belirttiği yapıda yaratılacak kullanıcı tipi Resim sınıfı nesne örneklerinin göevi, rollover resimlerini, programın başlaması ile sunucudan, kullanıcının bilgisayarının program belleğine aktarılmasıdır (image preloading).

Bundan sonra, kullanıcı tanımlı Resim sınıfının kullanımı ile ön belleklenmiş resimlerden yararlanarak rollover etkisini yaratan rollover() fonksiyonu oluşturulmuştur. Bu fonksiyonun yazılımı, aşağıda görüldüğü gibidir.:


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

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

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

function onClick() {
resim1.setAttribute('src',resim3.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) {
resim1.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) {
resim1.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) {
resim1.attachEvent('onclick', onClick);
}
}
		

Resim sınıfının kullanıldığı rollover programlarında, tüm rollover resimleri sayfa kodlarına yerleştirilmez. Sayfaya sadece görüntülenecek ilk resim (normal veya mouseout resmi) yerleştirilir. Diğer rollover resimleri, JavaScript programının belleğine aktarılır, böylece resimler kullanıcı bilgisayarında önbelleklenmiş olur ve gerektiğinde JavaScript program adımları ile, sayfadaki resimle yer değiştirir (swap). Bu yöntemi kullanan bir sayfanın rollover resimlerini içeren kısmının (X)HTML 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>
		

Görüldüğü gibi, sayfada sadece normal gösterim resmi bulunmakta, bununla yer değiştirecek rollover resimleri, JavaScript programının cache belleğinde önbelleklenmiş durumdadır. Bu yöntemin uygulandığı kendi kendine yeten bir program 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 rollover(res1, res2, res3) {
var resim1 = document.getElementById(res1),
kaynak1 = resim1.getAttribute('src'),
resim2  = new Resim(res2),
resim3  = new Resim(res3);

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

function mouseOver() {

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

function onClick() {

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

// 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) {
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() {
rollover('ileri1', '../images/ileri2.png', '../images/ileri3.png');
rollover('geri1', '../images/geri2.png', '../images/geri3.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);
}

/* ]]>  */

Yukarıdaki programda, sayfadaki her rollover yapılacak resmi özel olarak belirtmek gerekmektedir. Sayfadaki tüm rollover resimlerini tek defada tanıtabilecek bir otomasyon programı oluşturularak daha kolay rollover oluşturma olanağı bulunabilir. Bu konudaki bir program 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 rollover(res1, res2, res3) {
var resim1 = document.getElementById(res1),
kaynak1 = resim1.getAttribute('src'),
resim2  = new Resim(res2),
resim3  = new Resim(res3);

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

function mouseOver() {

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

function onClick() {

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

// 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 rolloverYap3(resimDizisi) {
var uzunluk = resimDizisi.length, j = 0;

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


function başlat() {
var resimler = new Array(ileri1', '../images/ileri2.png', '../images/ileri3.png, 'geri1', '../images/geri2.png', '../images/geri3.png');
rolloverYap3(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 gerekli tüm fonksiyonlar bdelib.js kitaplığına alınırsa, kullanıcı tanımlı Resim sınıfından yararlanan 3 resimli ve otomasyonu olmayan bir rollover etkisi, her rollover resmi için, basitçe rollover() fonksiyonunun ç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() {
rollover('ileri1', '../images/ileri2.png', '../images/ileri3.png');
rollover('geri1', '../images/geri2.png', '../images/geri3.png');
}

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

/* ]]>  */

Aynı programın otomasyon içeren sürümünün yazılımı aşağıda görülmekte ve bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

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

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

/* ]]>  */

Bu bölümde incelenen tüm programlar istenirse yanlız olarak, istenirse bdelib.js gibi bir kitaplık içine alınarak kullanılabilir. Tüm bu fonksiyonlar önbellekli olarak rollover etkisini JavaScript kullanarak yaratırlar ve aralarında bir performans farkı yoktur. Sayfanın orijinal yazılımını etkilemeyen ve kullanıcı tanımlı Resim nesne sınıfının kullanıldığı programlar daha kullanışlı olabilirler. Bu konuda seçim kullanıcıya kalmaktadır.