Tip: Adding interactive captions to your Blogger images on hover

For a long time I've been disappointed with the way most content management systems provide image captions in their WYSIWYG editors. Many, including Blogger, create an old-school table wrapped around the image, put the image in the first table row, then add the caption text into the second table row. You might have the most HTML 5, up to date website, and then suddenly you're stuck using tables like it's 1998.

We believe we've created a method that is both slick and interactive, as well as quite possibly increasing your search engine performance and making your images Section 508 accessible! It involves using your image's ALT text, some JQuery, and hovering over the image (optional), and we think it's pretty cool.

Step #1: adding alt text to your images

A while ago Blogger added the ability for bloggers to add alt text to their images as well as title text to the link surrounding the image. This functionality was never heralded, simply wrapped into the larger updates of SEO, permalinks, etc. Because of this many users still are not aware of this functionality and I'm guessing only a tiny percentage of users take advantage of it.

Head to your blog post and edit the post in the Compose tab. Click on the image in your post to open the dialog options that are displayed under your image, the ones where you normally set the size or placement of the image (or even the caption). Click on "Properties" (I know, you probably have overlooked this dozens of times).

A dialog window is now displayed where you can set the title text of the image's wrapping link, or you can set the alt text. We're going to use the alt text for our purposes. Put in your caption as the alt text and hit OK.

Save your post updates.

Step #2: the JQuery code

You can access a clean version of the code here.


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

var altBackground = "#ffffff";
var altTextColor = "#000000";
var altPaddingTop = 5;
var altPaddingBottom = 8;
var altPaddingSides = 5;

$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
        var image = $(image);
var alt = image.attr('alt');
var id = image.index();
var imageAltId = 'imagealt'+n;
image.parent().addClass('postImage');
var paddingString = altPaddingTop + 'px ' + altPaddingSides + 'px ' + altPaddingBottom + 'px ' + altPaddingSides + 'px'
image.after($('<div>').css('padding',paddingString).css('color',altTextColor).css('background-color',altBackground).css('opacity','0.6').css('filter','alpha(opacity=60)').attr('id',imageAltId).text(alt));
var divHeight = $('#'+imageAltId).height() + altPaddingTop + altPaddingBottom;
$('#'+imageAltId).css('margin-top','-'+divHeight+'px');
    });
});
//]]></script>
<style>
a.postImage div {
display: none;
} a.postImage:hover div {
display: block;
}
</style>


What we're doing in this script is dynamically grabbing the alt text from the image (that you added in Step #1), creating a new div after the image but inside the link, inserting the alt text into that div, and then only displaying it when you hover over the image.

To use this code you need to insert it into your template before the /head tag. You can wrap it within the standard if/else statements so it only operates on certain pages or types of pages, and you can customize the CSS in the style information area included in the code sample.

To see an example of this code in action please visit this demo page (the first image)

Enjoy!