Tip: Adding interactive captions to your Blogger images on hover

0
45

For a long fourth dimension I’ve been disappointed amongst the agency virtually content administration systems render icon captions inwards their WYSIWYG editors. Many, including Blogger, exercise an old-school tabular array wrapped roughly the image, pose the icon inwards the start tabular array row, thence add together the caption text into the instant tabular array row. You mightiness possess got the virtually HTML 5, upward to appointment website, together with thence of a precipitous you’re stuck using tables similar it’s 1998.

We believe we’ve created a method that is both slick together with interactive, likewise equally quite maybe increasing your search engine functioning together with making your images Section 508 accessible! It involves using your image’s ALT text, some JQuery, together with hovering over the icon (optional), together with nosotros mean value it’s pretty cool.

Step #1: adding alt text to your images

H5N1 piece agone Blogger added the powerfulness for bloggers to add together alt text to their images likewise equally championship text to the link surrounding the image. This functionality was never heralded, but wrapped into the larger updates of SEO, permalinks, etc. Because of this many users even thence are non aware of this functionality together with I’m guessing solely a tiny per centum of users possess got wages of it.

Head to your weblog postal service together with edit the postal service inwards the Compose tab. Click on the icon inwards your postal service to opened upward the dialog options that are displayed nether your image, the ones where you lot commonly laid the size or placement of the icon (or fifty-fifty the caption). Click on “Properties” (I know, you lot in all probability possess got overlooked this dozens of times).

H5N1 dialog window is directly displayed where you lot tin flame laid the championship text of the image’s wrapping link, or you lot tin flame laid the alt text. We’re going to job the alt text for our purposes. Put inwards your caption equally the alt text together with hitting OK.

Save your postal service updates.

Step #2: the JQuery code

You tin flame access a build 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 past times Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script volition live on posted to BlogXpertise
please travel out this message together with laissez passer on 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 icon = $(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 inwards this script is dynamically grabbing the alt text from the icon (that you lot added inwards Step #1), creating a novel div afterwards the icon but within the link, inserting the alt text into that div, together with thence solely displaying it when you lot hover over the image.

To job this code you lot involve to insert it into your template earlier the /head tag. You tin flame wrap it within the touchstone if/else statements thence it solely operates on sure enough pages or types of pages, together with you lot tin flame customize the CSS inwards the fashion data surface area included inwards the code sample.

To run across an illustration of this code inwards activeness delight catch this exhibit page (the start image)

Enjoy!
Sumber http://www.blogxpertise.com/