Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
06_Subat 2003

06_Subat 2003

Ratings: (0)|Views: 25 |Likes:
Published by sonmez

More info:

Published by: sonmez on Oct 21, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

10/22/2009

pdf

text

original

 
‹çindekiler 
Flash Serisi
S›kça sorulan uygulamalar
Photoshop Serisi
Kullan›fll› araçlarla h›zl› çözümler
Excel Serisi
Veri do¤rulama 2
Nas›l Çal›fl›r?
RAM nas›l çal›fl›r?
Web Programc›l›¤›
Rollover’lar hakk›nda her fley
Fiyat:
9.000.000 TL
(KDV ve gönderim ücreti dahil)
Siparifl için:http://abone.vogel.com.tr
CHIP WORKSHOP’da BUAY 
CHIP WorkshopKlasörü
’nüayraçlar›ylabirlikte siparifledebilir vekendi arflivinizioluflturabilirsiniz.
Kesin, biriktirin,kendi arflivinizi oluflturun
CHIP Workshop Klasörü
>>>>
 
Web Programc›l›¤›
29
CHIP
Workshop
>>
minim hepiniz web sayfalar›nda üzerine fare imleci ile gelin-ce de¤ifliveren yaz›lar› görmüflsünüzdür. Belki bu ilginç tekni-¤in nas›l kullan›ld›¤›n› çoktan merak edip incelemifl, hatta ba-flar›l› denemeler gerçeklefltirmifl olanlar›n›z da vard›r. Ama biz bugörsel zenginli¤i oluflturmak için gerekli teknik bilgiyi enine boyunaele alal›m dedik. Bu ayki Studio Web köflesini rollover efektlerineay›rd›k. Bu bölümü okuyup uygulad›¤›n›zda rollover’lar hakk›nda bi-rer uzman olacaks›n›z.
Rollover Efekti Nedir?
Web dilinde
rollover 
olarak adland›r›lan bu efektin Türkçesi var m›-d›r, varsa nedir bilemiyorum ama bunlar› “üzerine fare imleci ile ge-lince de¤iflen resimler” ola-rak tan›mlamak biraz uzun-ca da olsa yerinde bir ifadeolacakt›r.
Image Swapping
 yada
mouseover 
olarak da ad-land›r›lan bu efekti nitelikligrafiklerle kullanmak websayfalar›n›za inan›lmaz zen-ginlikler katacak, ziyaretçi-nizdeyse etkileflimlilik hissiuyand›racakt›r. Bundanemin olabilirsiniz.Peki gelelim rolloverefektinin nas›l oluflturuldu-¤una. Bu sorunun cevab› et-kinin yarat›laca¤› ortama gö-re de¤iflkenlik gösterebilir.Zira bir applet ortam›nda Ja-va, flash animasyonunda iseFlash kullanman›z gerekir. Ancak burada bahsi geçen konu normalweb sayfalar›ndaki rollover’lar ise cevap JavaScript kullanmakt›r.Ha, bu arada grafik de¤il de normal tekst içeriklerine rollover etkisi-ni CSS’in hover özelli¤iyle nas›l da kolayca oluflturdu¤umuzu geçenayki say›m›zda görmüfltük hat›rlarsan›z. Bu bak›mdan bu say›m›zdanormal tekst içerikleri yerine grafik dosyalar›yla çal›flaca¤›z. Bir derollover etkisinin oluflmas› için gerekli olan tetiklemenin sadece res-min üzerine gelinmesiyle kendimizi s›n›rlamam›za gerek olmad›¤›n›belirtelim. Bu herhangi bir tekst üzerine gelmekle olabilece¤i gibitaray›c› taraf›ndan alg›lanabilecek, akl›n›zdan geçebilecek her türlüifllem olabilir. Bu da tabii biraz da sizin JavaScript konusunda nedenli deneyim sahibi oldu¤unuza ba¤l›d›r.
Rollover efektinin arkas›nda yatan prensip
Rollover tekni¤inin arkas›nda yatan teknik prensip, HTML sayfas›n-da bir resim için kullan›lmak üzere üretilmifl iki farkl› resim ile bu re-simlerden hangisinin kullan›laca¤›n› kontrol eden bir JavaScript ko-dudur. En basit rollover versiyonunda üzerine gelince de¤iflecek re-sim için iki farkl› grafik kullan›l›r. Normalde HTML kodunda resimeklemeye yarayan <img> tak›s›nda bu resim nesnesinin kullanaca¤›grafik dosyas›n› src (source=kaynak) parametresi ile bildirmeniz ge-rekir.
<img src=“resim.gif” .. >
Yani resim nesnesi src parametresi ile sayfada hangi grafik dos- yas›n› göstermesi gerekti¤ini anlar. HTML statik oldu¤undan bunubir kere html koduna girdi¤iniz anda sayfa aç›k oldu¤u sürece ayn› yerde ayn› grafik görünecektir. JavaScript ise HTML’in statikliktendo¤an bu eksikli¤ini gidermek için gelifltirilmifl bir program oldu-¤undan ayn› resim nesnesi (img) için iki farkl› grafik dosyas›n› kay-nak olarak gösterebilir ve diledi¤i anda da hangisinin görünmesi ge-rekti¤ini belirler. Resimlerin kullan›ld›¤› kaynaklar›n de¤ifltirilmesiise onMouseover ve onMouseout eventhandler’lar› ile tetiklenir. Ya-ni k›saca ayn› yer için iki farkl› grafik kullan›lmakta, fare imleci üzeri-ne geldi¤inde grafiklerden biri görünürken, imleç resmin üzerindenayr›ld›¤›nda di¤eri görünmekte... prensip bu.Kollar› s›vay›p ifle bafllamaya ne dersiniz?
En basit rollover efekti
Rollover script’lerinin en basiti afla¤›daki gibidir. Ne var ki basitli¤inekarfl›n script’inizi bu flekliyle yazmak baz› sorunlar› beraberinde ge-tirecektir. Bu sorunlar›n neler oldu¤unu ve nas›l çözülece¤ini biraz-dan görece¤iz, ama biz yine de teknik bilgimizi yap›land›rmak içinbu ad›mla ifle bafllayal›m.Rollover çal›flmalar› için ben iki adet grafik dosyas› oluflturdum.Uygulamalar›m›zda bu resimleri kullanaca¤›z.
<html><head><title>Rollover Efekti</title></head><body bgcolor="#ffffff"><a href="birlink.html"onMouseover="document.resim.src='studioweb2.jpg'"onMouseout="document.resim.src='studioweb1.jpg'"><img src="studioweb1.jpg" name="resim" border="0" alt=""></a></body></html>
Bu rollover script’inin çal›flmas› flu flekilde oluyor. Taray›c› afla¤›-daki html kodunu okuduktan sonra
<img src="studioweb1.jpg" name="resim" border="0" alt="">
studioweb1.jpg isimli grafik dosyas›n› yüklemeye bafllayacak ve yüklendikten sonra ekranda gösterecektir. Kullan›c› da ekranda ilkolarak bu resmi görecek. Kullan›c› bu resim üzerine imleçle geldi¤ianda ise
<<<<
Rollover’lar hakk›nda herfley 
Fare ile üzerine gelince de¤iflen resimler hakk›nda merak ettikleriniz vetüm sorular›n›z›n cevaplar› bu ayki Studio Web’te.
    ✂
Etkileyici grafiklerle rollover’lar›n›-z›n ziyaretçiler üzerindeki etkisinidaha da artt›rabilirsiniz

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->