f1vlad.com

Recently I started wondering how I could make alt="" attribute of the <img> do more work than just be there hidden most of the time. I happened to be posting more and more photographs recently accompanied by a story that runs throughout alt tags.

Soon I realised that it's quite a waste because all this mini story that I had been writing was buried in these very alt attributes. So I decided to put these tags to work and wrote a jQuery snippet (see below) that extracts alt tags and puts them under every picture in a manner of subtitle or a legend.

<script type="text/javascript">
$(document).ready(function(){
    $('div.content p img').each(function(){
        var aText=$(this).attr("alt");
        if(aText.length>=1){ /* only do this for <img> which have alt="" tags */
            $(this).wrap("<span class=\"media\"><\/span>")
                    .after("<em>" + aText + "<\/em>");
        }
    });
});
</script>

Some may wonder why not just write this right next to the pics? Well I just don't want to. I just want these pics to be accompanied by mini story or mini sentences if you will. Kind of like twitter post vs. blog post.