Javascript Düğme Grafiği Animasyonu

Javascript Düğme Grafiği Animasyonu: 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:

<HTML> <HEAD> <SCRIPT LANGUAGE= "JavaScript1.2"> <!-- Javascript kodunu eski sürüm Browserlardan saklayalim // grafiklerimizi tanimlayalim 	var geri_outDugme = new Image( 54, 44 ); 	geri_outDugme.src = "geri_out.gif"; 	var geri_onDugme = new Image( 54, 44 ); 	geri_onDugme.src = "geri_on.gif"; 		 	var ileri_outDugme = new Image( 54, 44 ); 	ileri_outDugme.src = "ileri_out.gif"; 	var ileri_onDugme= new Image( 54, 44 ); 	ileri_onDugme.src = "ileri_on.gif"; 		 // degisiklik fonksiyonunu tanimlayalim 	function dugmeDegistir(nereye, goruntuNesne) { 		document.images[nereye].src = eval( goruntuNesne + ".src" ) 	} 		 //--> </SCRIPT> </HEAD> <BODY> <CENTER> <A HREF="javascript:history.back()" 	onMouseOver = "dugmeDegistir( 'geri', 'geri_onDugme' );window.status='Geri';return true;" 	onMouseOut = "dugmeDegistir( 'geri', 'geri_outDugme' );window.status='';return true;"> 	<IMG SRC="./geri_out.gif" BORDER=0	 WIDTH=52 HEIGHT=42 NAME="geri"> </A> 		 <A HREF="javascript:history.forward()" 	onMouseOver = "dugmeDegistir( 'ileri', 'ileri_onDugme' );window.status='Ileri';return true;" 	onMouseOut = "dugmeDegistir( 'ileri', 'ileri_outDugme' );window.status='';return true;"> 	<IMG SRC="ileri_out.gif" BORDER = 0	 WIDTH = 52 HEIGHT = 42 NAME = "ileri"></A> </CENTER> </BODY> </HTML>
Hakkı Öcal Javascript dersleri 

 

Bana Ders Anlat © 2008-2022