İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır
Zafer Teker
tekzaf@yahoo.com

Fare ile bir image'ın üzerine gelindiğinde image'ın değiştirilmesi

Resim Değiştirme

Bu örnekte fare ile bir resmin üzerine gelindiğinde o resmin yerine başka bir resim yerleştiriyoruz. Fare resmin üzerinden ayrıldığında eski resmi tekrar gösteriyoruz.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 	<script language="JavaScript">
  4     	function changeImage(imageName,imageFileName){
  5 			document.images[imageName].src=imageFileName;	
  6 		}
  7 	</script>
  8 </head>
  9 <body>
 10 <a href="geri.html" onMouseOver="changeImage('first','on1.gif')" onMouseOut="changeImage('first','out1.gif')">
 11 	<img src="out1.gif" name="first"></img>
 12 </a>
 13 <a href="ileri.html" onMouseOver="changeImage('second','on2.gif')" onMouseOut="changeImage('second','out2.gif')">
 14 	<img src="out2.gif" name="second"></img>
 15 </a>
 16 </body>
 17 </html>

Kodun Açıklanması

Burada iki tane image'dan link bulunmaktadır. Herhangi biri üzerine fare ile gelindiğinde resim değişmektedir. Normalde gözüken resimler out1.gif ve out2.gif'tir. Fare bu resimlerin üzerine geldiğinde out1.gif yerine on1.gif veya out2.gif yerine on2.gif resmi gelecektir.

onMouseOver bir nesnenin üzerine farenin gelmesini yakalamak için kullanılır. onMouseOver olayında biz changeImage metodunu çağırıyoruz. İlk paremetre img element'inin adıdır. İkinci parametre hangi resmin gösterileceğidir. Örneğin

changeImage('first','on1.gif')

ile first adlı img element'inin , yerinde on1.gif resmini göster demektir. Fare resmin üzerinden ayrıldığında ise onMouseOut olayı yakalanır. Burada ise

changeImage('first','out1.gif')

ile on1.gif yerine out1.gif resminin gösterilmesi istenir.

changeImage fonksiyonu ise

document.images[imageName].src=imageFileName;

ile verilen imageName adlı img element'inin yerinde imageFileName resmini göstermektedir.

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır