DÜĞME GRAFİĞİ ANİMASYONU

Cascading Style Sheets (Yığılmalı Stil Sayfaları) denen ve HTML'in kendi önceden-tanımlanmış stil etiketlerinin (H1, H2, P gibi) biçimini değiştirmek dahil, kendi stil etiketlerinizi tanımlamanıza imkan veren ek imkana geçmeden önce, şu ana kadar öğrendiğimiz Javascript komutlarını ve HTML olaylarını kullanarak, kendimize bir Anime (Hareketli) İleri-Geri düğmesi içeren sayfa yapalım. Hatırlayacaksınız, HTML'in Anchor etiketi, Mouse işaretçisinin üzerine gelmesi (MouseOver) ve geri çekilmesi (MouseOut) olaylarına karşı hassastı; ve biz iki olayı onMouseOver ve onMouseOut yönlendiricileri ile istediğimiz fonksiyona bağlıyabiliyorduk. Aşağıdaki kodun mantığı, buna dayanıyor; önce fonksiyonumuzda kullanmak üzere dört değişken tanımlıyoruz ve bunlara düğmelerimizin adlarını ve boyutlarını değer olarak veriyoruz. Bu alıştırmayı yapmaya başlamadan önce aynı boyda dört grafiğiniz olması gerekir: (1) İleri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (ileri_on.gif), (2) İleri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (ileri_out.gif), (3) Geri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (geri_on.gif), ve (4) Geri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (geri_out.gif). Konumuz grafikçilik değil, ama düğme grafiklerinizde yazı ve diğer unsurların yerlerinin aynı olması ve "on" ve "out" türleri arasında dikkat çekici bir derinlik (boyut) farkı bulunması yerinde olur.

dugmeDegistir" isimli fonksiyonumuz, onMouseOver ve onMouseOut yönlendiricilerinden iki küme bilgi almaktadır: işlemin ileri mi geri olduğuna ilişkin "ileri" veya "geri" kelimesini ve bu bu halde kullanması gereken değişkenin adını. Fonksiyonumuz, bu bilgileri kullanarak kullanacağı değişkenin adını elde edecektir. Bunu eval() fonksiyonu ile yapıyoruz. Hatırlayacaksınız, eval() ile, Javascript'in, bir kaç değişkenin içeriğini değerlendirip, bize arzu ettiğimiz bir biçimde sunmasını sağlıyoruz. Burada eval(), "goruntuNesne" adını verdiğimiz değişken-değerini alacak ("goruntuNesne," fonksiyonun onMouseOver veya onMouseOut'tan aldığı ikinci küme bilgi, yani ya "ileri_onDugme," ya "ileri_outDugme," ya "geri_onDugme," ya da "geri_outDugme") ve buna ".scr" metodunu harekete geçirecek kelimeyi ekleyecek. Bu metod ise fonksiyona, Javascript 'e düğmenin kaynağını (source) bulması için yol gösterecek. Aşağıdaki kodu animeDugme.htm adıyla kaydeder ve bir yerde saklarsanız, daha sonra bir çok düğme veya grafik animasyonunda size yol gösterebilir:

  1 <HTML>
  2 <HEAD>
  3 	<SCRIPT LANGUAGE= "JavaScript1.2">
  4 	<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
  5 		// grafiklerimizi tanimlayalim
  6 		var geri_outDugme = new Image( 54, 44 );
  7 		geri_outDugme.src = "geri_out.gif";
  8 		var geri_onDugme = new Image( 54, 44 );
  9 		geri_onDugme.src = "geri_on.gif"; 
 10 		var ileri_outDugme = new Image( 54, 44 );
 11 		ileri_outDugme.src = "ileri_out.gif";
 12 		var ileri_onDugme= new Image( 54, 44 );
 13 		ileri_onDugme.src = "ileri_on.gif"; 
 14 		// degisiklik fonksiyonunu tanimlayalim
 15 		function dugmeDegistir(nereye, goruntuNesne) {
 16 		document.images[nereye].src = eval( goruntuNesne + ".src" )
 17 	} 
 18 	//-->
 19 </SCRIPT>
 20 </HEAD>
 21 <BODY>
 22 <CENTER>
 23 	<A HREF="javascript:history.back()"
 24 		onMouseOver = "dugmeDegistir( 'geri', 'geri_onDugme' );window.status='Geri';return true;"
 25 		onMouseOut = "dugmeDegistir( 'geri', 'geri_outDugme' );window.status='';return true;">
 26 		<IMG SRC="./geri_out.gif" BORDER=0 WIDTH=52 HEIGHT=42 NAME="geri">
 27 	</A> 
 28 	<A HREF="javascript:history.forward()"
 29 		onMouseOver = "dugmeDegistir( 'ileri', 'ileri_onDugme' );window.status='Ileri';return true;"
 30 		onMouseOut = "dugmeDegistir( 'ileri', 'ileri_outDugme' );window.status='';return true;">
 31 		<IMG SRC="ileri_out.gif" BORDER = 0 WIDTH = 52 HEIGHT = 42 NAME = "ileri"></A>
 32 </CENTER>
 33 </BODY>
 34 </HTML>

DÜĞME GRAFİĞİ ANİMASYONU

Düğme Grafiği Animasyonu

Dosya Listesi