JQuery Resim Animasyon

 bcakir
 25 Ocak 2012

Merhaba arkadaşlar, bu yazımda isim bulamayıp kendimce isim uydurduğum çoğunlukla video ve albüm sitelerinde gördüğümüz bir konuyu anlatacağım. Video resminin üzerine gelince (thumbnail), videonun içerisinden kesitlerin bulunduğu bir resim görürüz (hareketli thumbnail). İşte bu uygulamamızda bunun nasıl yapıldığını anlatacağım. İlk önce aynı isimle kaydedilmiş bir tane resme (jpg) ve bu resmin animasyonlu haline (gif) ihtiyacımız var. Video için kullanacaksanız, video içerisinden görsellerle Photoshop programı aracılığıyla kolayca gif oluşturabilirsiniz. İki tane resim edindikten sonra ise bu işlem nasıl yapılıyor onu göstereyim. İlk önce sadece bir resim için yapalım.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Resim Animasyon</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //üstüne gelince çalıştır
    $("img").hover(function(){
		//resmin kaynağını değiştir
        $(this).attr("src","yuruyen-kamyon.gif");
    }, function(){
        //resmin üstünden çıkınca çalıştır
        $(this).attr("src","yuruyen-kamyon.jpg");
    });
});
</script>
</head>
<body>
<img src="yuruyen-kamyon.jpg" alt="Yürüyen kamyon" />
</body>
</html>

Yukarıda resim üzerine gelince, resmin hareketli olanını gösterdik ve resmin üzerinden çıkınca da eski resmi yerine koyduk. Şimdi bu işlemi bir çok video için nasıl yaptıklarını göstereyim. Sizleri, birkaç tane gif uzantılı hareketli resim bulmakla uğraştırmamak için uygulamanın resimleriyle birlikte çalışan halini yazının sonunda paylaşacağım.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Resim Animasyon</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //üstüne gelince çalıştır
    $("img").hover(function(){
        //resmin kaynağını (src) alma
        resim=$(this).attr("src");
        //uzantısını gif yapma
        sonuc=resim.replace(/jpg/, 'gif');
        //resmi değiştirme
        $(this).attr("src",sonuc);
    }, function(){
        //resmin üstünden çıkınca eskisini gtirme
        $(this).attr("src",resim);
    });
});
</script>
</head>
<body>
<img src="yuruyen-kamyon.jpg" alt="Yürüyen kamyon" />
<img src="banana.jpg" alt="Oynayan muz" />
<img src="cicek.jpg" alt="Gülen çiçek" />
</body>
</html>

Yukarıda ise hangi resmin üzerine geliyorsak onun dosya uzantısını değiştirip gif olan resmini çağırıyoruz, resmin üzerinden çıkınca da tekrar eski haline (png) döndürüyoruz. Uygulamamızın temel mantığı bu şekilde. Siz bu uygulamayı ister resim albümleri için falan kullanabilirsiniz, isterseniz de videolar için. Uygulamanın resimleriyle birlikte zipli halini buradan indirebilirsiniz. Böylece bir uygulama yazımızın daha sonuna geldik. Yararlı olması dileğiyle.

 2.165 Okunma

Bu yazıya 2 yorum yapılmış.

  1. güzel bir uygulama olmuş elinize sağlık : ))
    dikkatimi çeken şey attr komutu ile kaynak dosyaya ulaşmak oldu, keşke jquery’nin komutları için bir kategori açsanız. “attr” çok işe yarayabilicek bir komut gibi geldi bana, eminim yeterli ingilizcesi olmayan güzel bir kaynak olurdu..

    • Yorumunuz için teşekkür ederim. JQuery komutları ile ilgili 1-2 yazı yazma düşüncem vardı zaten planımda. Duruma göre yapısını değiştirebilirim.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat