Bu yazımızda, jQuery attribute özelliklerine kısaca göz atıp, resim büyütme, küçültme üzerine küçük bir uygulama yapacağız.
Öznitelik (Attributes) Fonksiyonları:
- .attr() //Belirtilen nesnenin alt özelliklerine erişmeyi sağlar.
- .removeAttr() //Bir öz niteliğin belirtilen nesnelerden kaldırılmasını sağlar.
Uygulama:
Uygulamamızda, "attr()" özelliğini kullanarak "image" üzerinde büyütme ve küçültme işlemi yapacağız. "Özellikler" butonuyla da resmin özelliklerini "(attributes)" uyarı mesajıyla görüntüleyeceğiz.
HTML yapısı:
<div id="area">
<img id="imgAttr" src="path/to/gitar.png" width="64" height="64" alt="Gitar alt" title="Gitar başlık" />
</div>
<button onclick="showProp()">Özellikler</button> <button onclick="enLarge()">Büyüt</button> <button onclick="shrink()">Küçült</button>
Javascript kodları:
<script type="text/javascript">
function showProp(){
var properties="Özellikler: ";
properties +="ID: "+$("#area img").attr("id")+", ";
properties +="alt: "+$("#area img").attr("alt")+", ";
properties +="title: "+$("#area img").attr("title")+", ";
properties +="src: "+$("#area img").attr("src")+", ";
properties +="width: "+$("#area img").attr("width")+", ";
properties +="height: "+$("#area img").attr("height");
alert(properties)
}
function enLarge(){
$("#area img").attr({
width:function(index,value){
return parseInt(value*1.5);
},
height:function(index,value){
return parseInt(value*1.5)
}
});
}
function shrink(){
$("#area img").attr({
width:function(index,value){
return parseInt(value*0.75);
},
height:function(index,value){
return parseInt(value*0.75)
}
});
}
</script>
Açıklamalar:
- 3. "attr()" özelliğini kullanarak nesnenin özelliklerini elde edip, uyarı mesajıyla görüntülüyoruz
- 13. "Büyüt" butonuna her tıklandığında, resmin boyutlarını "attr()" özelliğiyle yeniden belirliyoruz.
- 24. "Küçült" butonuna her tıklandığında, resmin boyutlarını "attr()" özelliğiyle yeniden belirliyoruz.
ÖNEMLİ: Bu örnekte "attr()" ile nesnenin boyutlarını statik olarak değil de dinamik olarak (Bir fonksiyon atayarak) belirliyoruz. Fonksiyon; (function(index, value)) geçerli genişlik(width) değerini(value) alıp, çarpım işleminden sonraki sonucu geri döndürerek yeni boyutu belirlememizi sağlıyor.
Kolay gelsin, görüşmek üzere...
