“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