onMouseOver, onMouseOut eventleri

Sıklıkla kullanacağımız eventler olan onMouseOver ve onMouseOut ikilisi mouseun bir link veya başka bir elemanın üzerine gelip gitmesini kontrol ederler. onMouseOver mouse bir linkin üzerine geldiğinde gerekli fonksiyonu çalıştırır. onMouseOver ise mosuse linkin üzerinden gittiğinde gerekli fonksiyonu çalıştırır.

Bu konuyu bir örnek üzerinde görelim. Aşağıdaki linkin üzerine mouse getirin ve biraz beklettikten sonra geri çekin.

Bu eventlerin çokça kullanıldığı hareketli butonların nasıl oluşturulduğunu bir örnek üzerinde görelim. Öncelikle iki adet buton resmi hazırlayın; biri mouse buton üzerinde değilken, diğeri mouse buton üzerinde bulunuyorken.

Buton resimlerinin hazır olduğunu kabul ederek devam ediyorum. Butonları hazırlamadıysanız örnek olarak kullandığım butonları deneyebilirsiniz.
Javascript resimleri nesne olarak kabul eder ve adı ise Image dir. Her resim Image nesnesinin bir elemanıdır. Bu nedenle bir resmi yüklemeden önce javascript resme bir yer açacak ve isim verecektir. Bunu şu şeklilde yapıyoruz. 
 

var resim=new Image(); // resim eğişkenini Image olarak tanımladık.
resim.src="yeniresim.gif"; //yeni Image nesnesine yeniresim.gif atandı.

var resim=new Image() şeklinde tanımlama şu işlemi javascripte yaptırıyor. öncelikle resim isimli bir değişken adı tanımlıyor; sonra bu değişkenin yeni bir nesne olarak atıyor(new) ve bu nesnenin bir Image nesnesi olduğunu belirtiyor. resim artık bir nesne olduğuna göre üzerinde Image nesnesinin metodlarını uygulamamız mümkün olmaktadır. İlk olarak bu nesneye bir değer atıyoruz. Bunu resim.src metodunu kullanarak yapıyoruz. src metodu bir Image nesnesine değer atamak için kullanılır. Atanacak resmin tam yolu verilmelidir.
resim.src=yeniresim.gif; şeklinde resim nesnesine yeniresim.gif resmi atanmış oldu.

Şimdi scriptimizi hazırlayalım. Scriptimiz iki adet Image nesnesi tanımlıyor.

 
<script>
<!-- gizle
var butonBir=new Image();
var butonIki=new Image();
butonBir.src=buton1.gif;
butonIki.src=buton2.gif;
// gizleme sonu -->
</script>

Burada butonBir ve butonIki nesnelerini tanımladık ve onlara değer atadık. Bu nesneleri bir resim üzerinde kullanmak istediğimizde kullanacağımız resme bir isim veriyoruz.
<img src="bizimresim.gif" name="birİsim"> böylece kullandığımız resmin bir adı oluyor ve biz javascriptle bu adı olan resme müdahale edebiliyoruz. Bunu şu şekilde yapıyoruz.

 
<a href="yeni.html" onMouseOver="tablo.src=butonIki.src"
onMouseOut="tablo.src=butonBir.src">
<img src="buton1.gif" name=tablo></a>

Kullanıma dikkat edin. img tagı içerisinde kullanacağımız resme bir isim veriyoruz. Bu örneğimizde tablo adını resme verdik. Artık tanımladığımız resmin adı tablo dur ve javascript bu resme ulaşmak için tablo adını kullanacaktır. tablo ya bir değer atamak için src metodunu kullanacağız; tablo.src= bir değer atamamız gerekiyor. Bu değeri daha önce tanımladığımız butonIki.src ile belirtiyoruz. tablo.src=butonIki.src şeklinde bir tanımlama ile tablo adlı resme daha önce tanımladığımız butonIki.src resmini atıyoruz. Basit bir kullanım.

Bir resmin değerini değiştirmenin yolunu öğrendik. Peki bu öğrendiğimizi nasıl uyguluyoruz. onMOuseOver ve onMouseOut yöntemlerini kullanıyoruz. Peki nasıl? Bu eventleri A tagı içerisinde kullanıyoruz. Bu tag bir link oluşturuyor. Bu linkin üzerine gelindiğini belirleyen onMouseOver eventi ile mouse link üzerine geldiğinde tablo resminin değerini değiştiriyoruz. onMouseOver="tablo.src=butonIki.src" butonIki olarak belirlediğimiz resmin üzerine gelince görülecek resim tablo resmine atanıyor. Böylece otomatikman tablo resmi olduğu gibi değişir.
Daha sonra ise linkin üzerinden mouse çekildiğinde ki bu durumu onMouseOut eventi kontrol eder; tablo eski haline dönmelidir. Böylece butonumuz hareketli olduğu gibi bir izlenim oluşturur. Bunu da onMOuseOver="tablo.src=butonBir.src" tanımlaması ile yapıyoruz. Böylece buton için mouse yok iken olması gereken şeklini tanımlamış olduk.

  Yöntemi anladığımızı umarım. Önce iki resim tanımlıyoruz. Bunları yüklüyoruz. onMouseOver halinde kullanılan resim değiştiriliyor ve onMouseOut halinde resim eski durumuna çevriliyor. Sonuç hareket eden bir buton.

Yorumlar (0)

Bu içeriğe ait yorumları masaüstüne alabilirsiniz