Genelde haber sitelerinde sıkça gördüğünüz, yazı karakterlerinin dinamik olarak büyütülüp küçültülme özelliğine rastlamışsınızdır.
Şu şekilde karşınıza çıkar
Bu kısa yazımda nasıl yapıldığına değinmek , hemde arşiv olarak internet defterimde yer almasını istedim.


Son zamanlarda artık oldukça popüler olan JQUERY ile basitçe yapmak elbette mümkün.
Ama bu yazımda Javascript ile nasıl yapılacağından bahsetmek istiyorum.
Genel mantık elbette aynı.

Tüm sayfadaki fontların değişmesi çok anlamlı değil.
Bu özellik genelde belirli bir alandaki kısım için eklenir.

Önce tetikleyecek kısma bakalım.

	<a href="#" onclick="degistir('icerik','2');">Yazıyı Büyüt</a>
	&nbsp;&nbsp;
	<a href="#" onclick="degistir('icerik',-2);">Yazıyı Küçült</a>

İsterseniz yukarıda verdiğim gibi bir imaj kullanarak estetik bir görüntü sağlayabilirsiniz
verdiğim kod içinde “degistir” isimli bir fonksiyon tetikleniyor.
2 Deger gönderiliyor birincisi fontun değişmesini istediğimiz alanın id ‘si.
Diğeride ne kadar değişim değeridir
Bu değerler + ve – olarak yer almaktadır ve font büyüklüğünü arttırmak yada  azaltmak için kullanılacak.

Deneme için “icerik” id’si olan kısım şöyle olabilir.

<p id="icerik" style="font-size:12px;">
	test test test test test<br>
	sadece bu yazı değişecek<br>
	</p>

Şimdi javascript kodumuza gelelim.

<script language="javascript">

function degistir(kaynak,deger)
{
var hedef=document.getElementById(kaynak);
var hedeffont=parseInt(hedef.style.fontSize,10)
hedef.style.fontSize = (hedeffont+parseInt(deger,10)) + 'px';
}
</script>

3 adımdan oluşuyor.
1)Değiştirmek istediğimiz kısımı tanımlıyoruz hedef değişkenine atıyoruz
2)Değiştirmek istediğimiz kısımın font büyüklüğünü rakamsal bir değişkene çeviriyoruz
parseInt bu işe yaramaktadır.
3)Değiştirmek istediğimiz alanın font büyüklüğü ile bizim değiştirme oranımızı topluyoruz
eğer bu değer eksi (-) ise küçülecek (dogal olarak çıkarma işlemi gerçekleşecek) eğer  artı (+) ise artacaktır.
Bburadaki parseInt ‘ı kullanmak sebebimiz fonksiyonu tetiklerken gönderdiğimiz değişken string olarak geldiği için interger hale getirmek içindir.

çalışan örneğe buradan bakabilirsiniz

Be Sociable, Share!