ALT Tag Inspector

by Aaron Kahlhamer

HTML

<div id="content">
    <img alt="Productname 1" src="http://cdn.cutestpaw.com/wp-content/uploads/2013/08/l-Fox-and-Daffodil-by-Sweetmart-via-Flickr.jpg" width="320" />
    <img alt="Productname 2" src="http://www.gunflint-trail.com/wp-content/uploads/2013/01/red-fox-kit-in-meadow-pictures.jpg" width="320" />
</div>

CSS

@charset "UTF-8";
/* CSS Document */

/* styles not specific to demo */
body, ul, li, div, img {
	margin:0;
	padding:0;
}
a.back-link {
	color:#2C2C2C;
	text-decoration:none;
	display:inline-block;
	margin:10px 15px 0 0;
	font: 13px/1.5em Verdana,Geneva,sans-serif;
	float:right;
}
a.back-link:hover {
	color:#DE1B1B;
}
/* end styles not specific to demo */

#content {
	margin:10px 0 0 10px;
	position:relative;
	width:300px;
	
}
#content img:first-child {
	margin-bottom:10px;
}
#content span.img-caption {
    background:url(images/caption-bg.png);
    color:#FFF;
    display:block;
    font-size:14px;
    height:26px;
	line-height:26px;
}
#content span.img-caption em {
    font-style:normal;
    display:block;
	padding-left:5px;
	font-size:13px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

JavaScript

$(document).ready(function() {
	  
	// display image caption on top of image
    $("#content img").each(function() {
          var imageCaption = $(this).attr("alt");
		  
          if (imageCaption != '') {
              var imgWidth = $(this).width();
              var imgHeight = $(this).height();
              var position = $(this).position();
              var positionTop = (position.top + imgHeight - 26);
              $("<span class='img-caption'><em>"+imageCaption+"</em></span>")
              .css({"position":"absolute", "top":positionTop+"px", "left":"0", "width":imgWidth +"px"})
              .insertAfter(this);
          }
		  
     });	
		
    
  });