jQuery ile Resim Açıklamalarının Gösterimi

Javascript |
1 YORUM
| 22 Kasım 2009

jQuery ile Resim Açıklamalarının Gösterimi Merhabalar. Bu makalemizde sizlerle basit olarak resim bağlantılarda resme ait tanımlamalarımızın nasıl gösterileceğini anlatacağız. jQuery javascript kütüphanesinden yararlanacak ve uygulamamıza görsel olarak renk katmaya çalışacağız.

Resimlerin üzerine fare ile gelindiğinde açıklama gösterilmesi, resmin tanımladığı konunun veya makalenin bağlantısının verilmesi son dönemlerde oldukça sık kullanılan bir özellik...

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

 

UYGULAMANIN MANTIĞI
İşin Mantığı :)
Örneğimize ait anlatıma geçmeden önce biraz işin mantığını anlatmak istiyorum. Böylelikle uygulamayı ve yapımını daha kolay kavrayabiliriz.

Aslına bakarsanız yaptığımız iş çok basit. Css ile oluşturduğumuz bir sınıf içine resmimizi gösterecek olan Xhtml kodunu yazıyoruz. Bu kodun bitiminde bir Span etiketi açarak resmimize ait tanımlamayı yazıyor ve Span etiketimizi kapatıyoruz. (Span etiketimizi Css kodları içinde display:none; değeriyle görünmez hale getireceğiz)

Xhtml kodumuzu bu şekilde yazdıktan sonra Css ile resim gösterimi ve tanımlaması için ayrı ayrı kullanacağımız Xhtml etiketlerinin stillerini tanımlıyoruz. Span ve diğer sınıfların Margin ve Padding değerlerini uygulamamıza uygun şekilde veriyoruz. (Bu da tasarımın matematiği sanırım :)

İşin jQuery boyutunda ise geriye Css kodlarımızda görünmez yaptığımız Span etiketini .Resim isimli sınıf üzerine gelince görünür hale getirmek kalıyor. jQuery'nin slideDown ve slideUp efektlerini açıklama gösterimi için kullanıyoruz. Çok uzun bir açıklama oldu sanırım, isterseniz hemen kodlarımızı yazalım ve uygulamamızı hayata geçirelim.

1. ADIM: XHTML KODLARININ YAZIMI
Aşağıdaki kodları boş bir metin editöründe açarak yazalım ve index.html olarak kaydedelim.

PLAIN TEXT
HTML:
  1. <div id="gosterimalani">
  2. <div class="resim">
  3. <a href="#"><img src="resim1.gif" alt="" /></a>
  4. <span>Resim 1'e ait açıklama</span>
  5. </div>
  6.  
  7. <div class="resim">
  8. <a href="#"><img src="resim2.gif" alt="" /></a>
  9. <span>Resim 2'ye ait açıklama</span>
  10. </div>
  11.  
  12. <div class="resim">
  13. <a href="#"><img src="resim3.gif" alt="" /></a>
  14. <span>Resim 3'e ait açıklama</span>
  15. </div>
  16.  
  17. <br style="clear:both" />
  18. </div>

Xhtml kodlarında önce Gösterim alanı isimli bir id tanımladık. Bu id içerisinde resimlerimizin gösterileceği sınıf olan .resim sınıf yer alacak. Div class="resim" alanından sonra resmimizin Xhtml kodunu yazıyoruz. Sonrasında ise bir Span etiketi açarak açıklamamızı yazıyoruz.

2. ADIM: CSS KODLARININ YAZIMI

PLAIN TEXT
HTML:
  1. #gosterimalani {
  2. width:650px;
  3. margin:0 auto;
  4. background:#222;
  5. border:1px solid #333;
  6. padding:20px;}
  7.  
  8. .resim {
  9. float:left;
  10. padding-right:10px;
  11. display:inline;}
  12.  
  13. span {
  14. display:none;
  15. font:12px/20px arial, verdana, sans-serif;
  16. background:#000;
  17. color:#fff;
  18. height:36px;
  19. margin:-50px 2px 4px 2px;
  20. position:relative;
  21. padding:4px;
  22. width:192px
  23. }
  24.  
  25. .resim a img {border:2px solid #444}
  26. .resim a:hover img {border:2px solid #999}

Css kodlarında dikkat edeceğimiz en büyük öge Span etiketine vermiş olduğumuz stiller. Span etiketinin uygulamamıza bağlı olarak aldığı Margin değerlerine dikkatinizi çekmek istiyorum. Span etiketine vermiş olduğumuz eksi margin değeri görünürlüğün resimler üzerine tam ve uygun olarak yansımasını sağlayacak biçimde ayarlandı. Margin değerleri dışında, arkaplan, metin rengi, yükseklik gibi değerleri de tanımladık.

3. ADIM: jQUERY KODLARININ YAZIMI

PLAIN TEXT
HTML:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  3. $(document).ready(function () { 
  4.     $(".resim").hover(
  5.         function () {
  6.         $("span", this).slideDown();
  7.         },
  8.         function () {
  9.         $("span", this).slideUp();
  10.         }
  11.     );
  12. });
  13. </script>

jQuery kodlarında yaptığımız şey ise oldukça basit. Resim isimli Css sınıfının üzerine fare ile gelindiğinde Span etiketinin slideDown efekti ile gösterilmesini sağlıyoruz. Aksi durumda ise Span etiketimiz slideUp efekti ile gözden kayboluyor. Gördüğünüz gibi jQuery kodumuz oldukça kısa ve kolay yazılabilir. Zaten jQuery'nin asıl amacı da bu değil mi? Az kod çok iş! (Dilerseniz slideDown ve slideUp efektlerine milisaniye cinsinden zaman ataması yapabilir veya fast, slow gibi açılma hızı tanımlamaları ekleyebiliriz. Ben örneğimizde kodları şişirmemek adına bunları kullanmadım, dilerseniz siz .slideDown("fast"); gibi bir değer vermeyi tercih edebilirsiniz)

Örnek uygulamamızda göreceğiniz gibi vermiş olduğumuz Css değerleri ışığında resimler üzerine geldiğinizde resim açıklamalarımız aşağıdan yukarı görünür hale geldi. Oldukça kolay kodlanabilen bu uygulama ile resim bağlantılarınızı daha da renklendirebilirsiniz. Sorularınız veya konuya ilişkin eklemeleriniz olursa bunları yorumlarımla cevaplamaktan büyük zevk alacağım.

Umarım sizler için faydalı ve güzel bir anlatım olmuştur. Bir başka makalemizde görüşmek üzere...

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

 

Rastgele Yazılar

Bu yazı , , , , , , , kelimeleriyle etiketlenmiştir. Bu yazıyı beğendiyseniz Delicious, Twitter, Facebook gibi sitelerde paylaşabilirsiniz. Yazılarımızı düzenli olarak takip etmek içinse Rss abonemiz olabilirsiniz.

jQuery ile Resim Açıklamalarının Gösterimi yazısı için 1 yorum yapılmış...

  1. myyol.com diyor ki:
    2009, Aralık 21, 11:36 am

    jQuery ile Resim Açıklamalarının Gösterimi | t-infection.com | tasarım oyuncakları, web teknolojileri…

    Merhabalar. Bu makalemizde sizlerle basit olarak resim bağlantılarda resme ait tanımlamalarımızın nasıl gösterileceğini anlatacağız. jQuery javascript kütüphanesinden yararlanacak ve uygulamamıza görsel olarak renk katmaya çalışacağız.

    Resimlerin üzer…

    Cevapla

Yorumunuzu Yazın