JavaScript Button Rollover

Merhaba,
Bu yazımda biraz daha dizayn ağırlıklı bir konudan bahsedicez.
Konumuz rollover button'lar. Bilmeyenler için bir hatırlatma yapalım, Rollover bir çok sitede gördüğünüz farenin bir butunun veya bir imajın üzerine gelmesiyle o nesnenin değiştirilmesi işlemine verilen isimdir.

Bu işlem çoğunlukla web sitelerdeki tuşları tanımlamak ve tıklanabilir olduklarını anlatmak için kullanılır.

Aslında birçok kişi bu konuya Dreamweaver'dan aşina. Dreamweaver sizin için otomatik olarak rollover imagelar yaratabiliyor. Ancak yarattığı kod o kadar çirkin ve kullanışsızki, her yeni rollover image eklediğinizde HTML'inize birsürü karışık kodlar ekleyip daha sonra içinden çıkamıyacağınız bir hale getiriyor.
Bu iş için çok basit bir CSS Çözümü var aslında ancak IE herzamanki gibi oyun bozanlık yapıp bunu kullanmamızı engelliyor. Yinede ben %90 lık IE kullanıcılarını umursamıyorum diyorsanız CSS yöntemini bi hatırlatalım

.rollover{
   background:url(images/button.gif);
}

.rollover:hover{
   background:url(images/button_over.gif);
}

.rollover:active{
   background:url(images/button_down.gif);
}

Kodu biraz tanımlarsak. .rollover{ image'ın normal durumu .rollover:hower image'ın mouseover durumu ve .rollover:active ise image'ın mousedown durumudur. geri kalanı CSS sizin için halledicektir.
Gördüğünüz gibi oldukça basit, ancak iki kusuru var birincisi IE6 asla ne yapmaya çalıştığınızı anlamıyacak ve ikincisi her roll over image için ayrı ayrı bunları yazmanız gerekicek.

Durum böyle olunca bende kendi javascript fonksiyonumu yazmaya karar verdim. heryerde kullanılabilecek oldukça geliştirmeye açık ve anlaşılır olmasını istedim. Sonuçta JotForm üzerinde kullanıyoruz ve oldukça başarılı oldu.

İlk önce fonksiyonun nasıl çalıştığının bir örneğini görelim.



İlk tuş yukarda verdiğim CSS rollover örneğine ait. Alttaki iki tane ise benim javascript ile yaptığım örnekler
birisi normal imaj diğeri ise bir button, yazdığım fonksiyon ikisi arasındaki farkı anlayıp ona göre davranıyor. ayrıca fark ettiyseniz alttaki tuşda mousedown efekti yok buda fonksiyona gönderilen bir argumanla kapatılabiliyor.

evet şimdi fonksiyonu görelim.

function buttonOver(elem,noDown){
   var realImage = "";             // Should be empty. veriable to keep original background.
   var ext      = ".gif";          // Define Extention .gif .png .jpg
   var over_ext = "_over" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var down_ext = "_down" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var regEx = /\.\w+$|\.\w+\)$/;  // Remove extention of the image
   var preload_img = function(imgToLoad){
      var img = new Image;
      if(document.imageArray)
         document.imageArray.push(img.src = imgToLoad);
      else{
         document.imageArray = new Array();
         document.imageArray.push(img.src = imgToLoad);
      }
   }
   
   if(elem.style.backgroundImage){      // if object has a background.
      realImage = elem.style.backgroundImage.replace(regEx,"");  //Take original background and replace with over image.
      elem.style.backgroundImage = realImage + over_ext +")";
   }else if(elem.src){         // if object has a src .
      realImage = elem.src.replace(regEx,"");       //Take original background and replace with over image.
      elem.src = realImage + over_ext;
   }
   if(!noDown) preload_img((realImage + down_ext).replace(/^url\(/,"")); // Preload images
      elem.onmouseout = function(){ buttonOut(elem); }   // Define mouseout event.
      elem.onmousedown = function(){ buttonDown(elem); } // Define mousedown event.
      elem.onmouseup  = function(){ buttonUp(elem); }    // Define mouseup  event.
      var buttonOut = function(elem){      // on mouseOut revert back to original image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + ext + ")";
         }else if(elem.src){
            elem.src = realImage + ext;
         }
      }
      var buttonUp = function(elem){      // on mouseUp revert back to mouseover image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + over_ext +")";
         }else if(elem.src){
            elem.src = realImage + over_ext;
         }
      }
      var buttonDown = function(elem){    // on mouseDown replace with mouseDown image.
         if(noDown) return true;
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + down_ext +")";
         }else if(elem.src){
            elem.src = realImage + down_ext;
         }
      }
}

buttonOver fonksiyonunu kullanmanız için ilk önce yapmanız gerek bir kaç küçük ayar var.
mesela fonksiyonun ilk satırındaki değerleri ayarlamak gibi.

function buttonOver(elem,noDown){
   var realImage = "";
   var ext      = ".gif";
   var over_ext = "_over" + ext;
   var down_ext = "_down" + ext;
[...]

Gayet açık kullanacağınız image'ların uzantısı ext, mouseover olduğunda gelicek resmin son eki over_ext, mousedown olduğunda gelicek olan resmin son eki down_ext
resimleriniz için genelde button.gif, button_over.gif, button_down.gif yada button.gif button2.gif button3.gif gibi isimler seçmeye özen gösterirseniz hem işinizde kolaylık sağlar hemde dosyaların yönetimi kolaylaşır.

Fonksiyon artık kullanıma hazır. fonksiyonu çalıştırmak için yapmamız grekende çok basit. Sadece mouseover event'inde buttonOver(this) yazarak çağırıcaz tek yapmamız gereken bu. Fonksiyon sizin verdiğiniz ayarlara göre davranarak diğer bütün eventleri ayarlayacaktır.
Ayrıca mousedown işleminde gelicek olan resim içinde küçük bir preload var.
eğer mousedown event'inin çalışmasını istemiyorsanız da buttonOver(this,true) diyerek çalışmasını engelleyebilirsiniz.

Fonksiyonla ilgili bir sorun yaşarsanız herzaman sorabilirsiniz.
İyi Çalışmalar.