Bu yazımızda Javascript ile "onmouseover ve onmouseout" olaylarıyla ilgili bir uygulama yapacağız, fakat bu uygulamada dikkat çekmek istediğim diğer bir konu da, kodlarımızda zincirleme işlemini nasıl yapacağımız ve ne gibi faydaları olacağıdır.
Javascript kodlamalarında zincirleme sistemi işin özünü oluşturuyor, kodlamalarımızda "nesne.metod.özellik" yapısını kullanıyoruz zaten. Örnek: "document.forms[0].elements[0].name" gibi...
Burada dikkat çekmek istediğim nokta ise, bir nesneyi bir değişkene atayıp daha sonraki zincirleme işleminde, bu nesneyi sanki "document" nesnesi gibi kullanmak üzerine...
Ne gibi bir kullanım alanı olacağına gelince. Farzedin bir çok paragraf etiketiniz var <p>, her bir paragrafın içinde de değişik sayıda "image" nesneniz var ve siz her bir paragrafın içindeki resimlere ayrı ayrı ulaşmak istiyorsunuz... Bu tip durumlar, nesnenin üzerine gelince gerçekleşen animasyonlar veya bilgi aktarımlarında karşınıza çıkacaktır.
Örneğimize dönersek, konu daha net olacak sanırım.
Farzedelim bir alan içinde katmanlarımız (layer) var ve içlerinde resimler var, bizim amacımız sadece bu alan içindeki katmanlara ulaşmak ve kaç tane katman olduğunu tespit etmek olsun, "onmouseover" ve "onmouseout" olayları için de, her bir resmin üzerine gelindiğinde bu resimlerin büyük hallerini aşağıdaki bir alanda gösteren bir uygulamayı ekleyelim (Bu arada, zincirleme yöntem ile istediğimiz bir nesnenin değerlerine ulaşmak olgusuna da ayrıca dikkat edelim...)
Bu tip uygulamaları birçok şekilde kullanabilirsiniz: Haber sitelerinde haber başlığına geldikçe içeriğin değişmesi gibi mesela...
Uygulama
Resimlerin üzerine geldiğinizde bilgi alanında resimlerin büyük halleri görüntülenecektir.
Yukardaki resimlerin üzerine gelindiğinde bu alana büyük resim gelecek...
Yukardaki uygulamamızda, "Katman Sayısı" butonuna tıklandığında sayfamızda daha fazla katman (div) olmasına karşın, bize "area_product" id'li nesne içindeki katmanların sayısını verdi, resimlerin üzerine gelinince de alt taraftaki katmanda büyük halleri görüntülendi.
CSS yapısı:
#area_product{
position:relative;
width:600px;
height:100px;
padding:5px;
margin-bottom:14px;
clear:both;
}
#area_product_wrapper{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:300px;
padding:5px;
margin-bottom:14px;
clear:both;
}
#area_product .img_style{
width:64px;
float:left;
height:64px;
padding:4px;
}
#area_product .img_style img{
cursor:pointer
}
#info_demo_text{
float:left;
height:128px
}
#area2{
float:left;
}
Html yapısı:
<div id="area_product_wrapper">
<div id="area_product">
<div class="img_style"><img src="gitar.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
<div class="img_style"><img src="surf.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
<div class="img_style"><img src="ucak.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
<div class="img_style"><img src="tatil.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
<div class="img_style"><img src="twitman.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
<div class="img_style"><img src="medal.png" alt="" title="" width="64" height="64" onmouseover="showImage(this.src);" onmouseout="showText();"/></div>
</div>
<div class="clear"></div>
<span id="info_demo_text" style="">Yukardaki resimlerin üzerine gelindiğinde bu alana büyük resim gelecek...</span>
<div class="clear"></div>
<div id="area2">
<div><button name="sayi" onclick="katmanNo();">Image (Katman) sayısı</button></div>
</div>
</div>
Javascript Kodları:
<script type="text/javascript">
function katmanNo(){
var alan=document.getElementById("area_product");
alert(alan.getElementsByTagName('div').length);
}
function showImage(kaynak){
document.getElementById('info_demo_text').innerHTML='<img src="'+kaynak+'" width="128" height="128" alt="" title="" />';
}
function showText(){
document.getElementById('info_demo_text').innerHTML="Yukardaki resimlerin üzerine gelindiğinde bu alan büyük resim gelecek...";
}
</script>
Açıklamalar:
- 2. katmanNo()fonksiyonunda, ilk önce "area" id'li katmanımızı "alan" değişkenine aktarıyoruz, daha sonra alan değişkenini ilk nesnemiz olarak kabul edip getElementsByTagName('div') ile sadece "area" içindeki katman sayısını mesaj olarak gönderiyoruz.
- 6. showImage() fonksiyonunda "onmouseover" olayıyla gönderilen "image kaynak" (this.src) adresini, "img" etiketi ile birlikte, büyük resmi göstereceğimiz alanın içine yazıyoruz (innerHTML)
- 9. showText() fonksiyonunda "onmouseout" olayıyla, büyük resmi göstereceğimiz alanın içine varsayılan yazımızı ekliyoruz (innerHTML)
Kolay gelsin, görüşmek üzere...
