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

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.

Zafer Teker

tekzaf@yahoo.com

  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

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

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

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

Resim Değiştirme

Kodun Açıklanması

Dosya Listesi