Merhaba arkadaşlar. Bu makalemizde yukarıdaki görselde de görüldüğü üzere butonlar ile metinlerimizi sayfa yenilenmeden anlık olarak boyutlarını büyültebileceğiz/küçültebileceğiz. Genelde haber sitelerinde kullanılan bir yöntemdir. Öncelikle html ve css kodlarımızı yazacağız. Sonrasında javascript kodlarımıza geçeceğiz.

<p>

	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

	</p>

    <p>

	<img src="a+.jpg" alt="Büyült" id="buyuk" />

    <img src="a-.jpg" alt="Küçült" id="kucuk" />

	</p>

Bu kodlarımızı body etiketleri arasında yazıyoruz. Şimdi css kodumuza geçelim.

<style type="text/css">

		p {

		width:100%;

		font-family: Tahoma;

		}

	</style>

Bu kodumuzu head etiketleri arasına yazıyoruz. Burada p etiketimizin sayfa genişliğinin tamamını kaplamasını sağladık ve yazı tipimizi belirledik. Şimdi javascript kodlarımıza geçelim.

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script type='text/javascript'>

	$(function(){

		$('img').click(function(){

			var parag = $('p');

			var yaziboyut = parag.css('fontSize');

			var yaziboyutu = parseFloat(yaziboyut, 10);

			var yazison = yaziboyut.slice(-2);

			if(this.id == 'buyuk') {

				yaziboyutu *= 1.2; //yazı boyutunu 1.2 ile çarparak büyütüyor.

			}

			else if (this.id == 'kucuk'){

				yaziboyutu /=1.2; //yazı boyutunu 1.2'ye bölerek küçültüyor.

			}

			parag.animate({fontSize: yaziboyutu + yazison},600);

		});

	});

	</script>

Son olarak asıl işi yapan kısma geldik. Olmazsa olmazımız olan jquery kütüphanemizi sayfamıza ekledik. Burada html img elemanının tıklama eventine fonksiyonumuzu yazdık. Tıklanılan görselin id'si büyükse yazıyı büyütecektir, küçükse küçültecektir. Javascript kodlarımızı head etiketleri arasına yazıyoruz. Anlaşılmayan bir yer olursa yorum yoluyla sorabilirsiniz. Görüşmek dileğiyle...