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;

Tavsiye yazı : Blogunuza Kayan Sosyal Paylaşım Butonları Ekleyin

<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.

Tavsiye yazı : Blogunuza Pop-up İletişim Formu Ekleyin

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?