Jquery ile Sayfadaki Tüm Görsellere Alt Etiketi Eklemek

Bloglarımızda yazılarımızın içerisinde genellikle görsellere yer veririz. Ancak her zaman görsellerimize, alt ve title gibi etiketler eklemeyi unutabiliyoruz. Böyle durumlarda işimize yarayacak bir kod paylaşacağım bugün. Jquery kullanarak sayfada yer alan tüm görsellere alt etiketi eklememize olanak tanıyan bu kod sayesinde; hem kopyalamalara karşı ufak bir tedbir alacağız, hem de unuttuğumuz eski yazılarımızı tek tek düzenlemek zorunda kalmayız. Öncelikle kodumuzun nasıl çalışacağından bahsedelim.

Jquery ile Görsellere Otomatik Alt Etiketi Ekleme

Yazacağımız Jquery kodu, sayfadaki tüm görselleri bulmalı. Görsellerin alt değerlerini kontrol etmeli. Eğer görselimizin bir alt değeri yoksa, bizim belirlediğimiz alt etiketini görselimize eklemeli. Yani iki aşamalı bir kod olacak. Öncelikle, sayfamızda yer alan tüm görselleri bir döngü yardımıyla toplayacağız.

1- Sayfadaki Tüm Görsellere Jquery ile Erişelim

Bu döngü, bize Jquery kütüphanesinin sağladığı each fonksiyonu yardımıyla kuracağız.  
$("img").each(function(){
ile bu döngüyü rahatlıkla oluşturabiliriz. Sonrasında, döngü içerisinde gelen görsellerin, alt etiketlerinde herhangi bir değer olup olmadığını da basit bir if bloğu yardımıyla kontrol edebiliriz.

2- Görselin Alt Etiketini Jquery ile Kontrol Edelim

if(($(this).attr("alt") == "undefined" || $(this).attr("alt") == null || $(this).attr("alt")=="")) {
koşullamasıyla; imajın herhangi bir alt değeri yoksa cümlesini kurabiliriz. Sonrasında alt etiketi olmayan görsellere otomatik olarak istediğimiz değeri yazdırabileceğiz. Onu da döngü içerisinde yapabileceğimiz için yine this ifadesini kullanacağız.

3- Görselin Alt Etiketini Jquery ile Tanımlayalım

$(this).attr("alt", "Ehliblog.com Alt Etiketi Ekleme");
Burada, alt özelliğine dilediğimiz değeri atayabiliyoruz. Kodumuzu toparlarsak;

<script>
 $(document).ready(function(){
  $("img").each(function() {
    if(($(this).attr("alt") == "undefined" || $(this).attr("alt") == null || $(this).attr("alt")=="")) {
    $(this).attr("alt", "Ehliblog.com Alt Etiketi Ekleme");
    $(this).addClass('ehliblog.com');
    }
   });  
});
</script>

Kodda yeşil yazan alanı kendinize göre değiştirerek, görsellerinizde alt etiketi olarak yer almasını istediğiniz değeri ekleyebilirsiniz. Yazıda paylaştığım kodların çalışan halini Ehliblog Demo üzerindeki bu sayfadan inceleyebilirsiniz.

Son Sözler

Kodun düzgün çalışabilmesi için sayfanızda Jquery kütüphanesi ekli olmalıdır. Eğer sayfanızda jquery kütüphanesi ekli değilse, kod çalışmayacaktır. Bunun dışında, kodla alakalı ya da Jquery ile alakalı sorularınızı; her zamanki gibi yorumlarınız vasıtasıyla sorabilirsiniz.
Bu ufak jquery uygulamasını, bloga eklediğim bir yazımda alt ve title etiketlerini tanımlamadığımı fark ettikten sonra kodladım. Benim gibi unutkanlar için çok faydalı bir uygulama. Siz ne dersiniz; tüm görsellerinize alt etiketi tanımlamak pratik bir çözüm değil mi?

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. selammun aleyküm iyi çalışmalar mail üzerinden tem atıcaktınız mail yoluyla ulaştım cevap vermediniz ?

    YanıtlaSil
    Yanıtlar
    1. Merhaba! Facebooktan geri dönüş yapmıştım size. Az önce de mail adresinize gönderdim. İyi günlerde kullanmanız dileğiyle.

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.