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

Bu örnekte bir link'in üzerine gelindiğinde sayfa içindeki bir resmi başka bir resimle değiştiriyoruz.

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 <body>
 11 	<a href="a.html" onMouseOver="changeImage('test','a.gif')">a.gif</a><br>
 12 	<a href="b.html" onMouseOver="changeImage('test','b.gif')">b.gif</a><br>
 13 	<a href="c.html" onMouseOver="changeImage('test','c.gif')">c.gif</a><br>
 14 	<a href="d.html" onMouseOver="changeImage('test','d.gif')">d.gif</a><br><br>
 15 	<img src="a.gif" name="test"></img>
 16 </body>
 17 </body>
 18 </html>

Kodun Açıklanması

Örnekte 4 link bulunmaktadır. Hepsi ayrı bir resmi gösterecektir. Örneğin a link'i üzerine fare ile gelindiğinde test adlı img element'inde a.gif resmi gösterilecektir. b linkine gelindiğinde ise b.gif resmi gösterilecektir.

onMouseOver ile bir link'in üzerine gelindiğinde changeImage fonksiyonunu çağırıyoruz. Bu fonksiyon imageName adında img element'inin gösterdiği resmi imageFileName yapmaktadır. Örnekte test adlı img element'inin yerinde resimler gösteriliyor. Örneğin ikinci paramtre olrak a.gif gelirse

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

Resim Slaytı

Kodun Açıklanması

Dosya Listesi