Seventh Octave

We're Starters. We write about culture, design and the business of software.

We believe software should be beautiful and inspired. Follow us as we build @TechOctave.

Image Description Overlay using JavaScript and jQuery TVD Jul 30

3 comments Latest by TVD

We all know accessibility and SEO are important facets of web application development. Accessibility, itself, speaks to the heart of what the web is all about. Namely, the ability for people to break free from whatever bonds hold them at bay and explore a world vast and wild. I know first hand the power of that freedom.

While writing this article, I got to see live and in-person how magnificent the Ferrari California truly is. Inspired and pumped, I implemented one of its dashboard gauges. You can find the Ferrari California dashboard gauge in our JavaScript Gauge Suite:

The Ferrari California is a grand touring sports car. The car revives the ‘California’ name used for the late-1950s Ferrari 250 GT.

SEO and Accessibility Matter

Accessibility and SEO come into play particularly with image rich applications. Think Instagram for example. With these types of applications, it is important to specify the alt attribute on each and every image:

<img class="overlay" src="ferrari.jpg" alt="The Ferrari California is a grand touring sports car. The car revives the 'California' name used for the late-1950s Ferrari 250 GT."/>

This ensures the application is readable to a whole host of folks who otherwise wouldn't be privy to the information. Wouldn't it be cool if we could reuse that alt attribute to enhance our application? That's exactly what we are going to do in this lesson — JavaScript style.

Adding Image Overlays (Automatically)

The image must have an overlay class attribute. Then we'll write code to reuse each image's alt tag to create a description overlay on hover.

Here is the jQuery and JavaScript code to add the image overlay:

$(window).load(function() {
 $("img.overlay").each(function(){
  //Wrap the image with an overlay
  $(this).wrap("<div class='description_overlay'></div>");

  //Cache description overlay object
  var o = $(this).parent(".description_overlay");

  //Append the description to the overlay
  o.append("<div class='description'><div class='description_content'></div></div>");

  //Align the description with the image
  o.find(".description").css("opacity", 0);
  o.find(".description").css("width", $(this).width());
  o.find(".description").css("display", "block");
  o.find(".description").css("text-align", "center");

  //Set the description from the img alt attribute
  o.find(".description_content").html($(this).attr("alt"));

  //Apply the hover effects
  o.mouseover(function(){
    o.find(".description").stop().fadeTo(500, 0.7);
  });

  o.mouseout(function(){
    o.find(".description").stop().fadeTo(500, 0);
  });
 });
});

For each image with the class overlay, we start to apply our techniques. First, we wrap that image with description_overlay div and append placeholders for the description content.

Some CSS needs to be messaged a little:

.description_overlay {  
    position: relative;
    margin-left: 21em;
    margin-top: 5em;
}  

.description {  
    position: absolute; 
    bottom: 5px;
    left: 0px;  
    display: none; 

    background-color: black;  
    font-family: "arial";  
    font-size: 1em;  
    color: white; 
}  

.description_content {  
    padding: 20px;  
}

.description, img {
    cursor: pointer;
}

See, not as much CSS as you would think...

After some CSS messaging, we then apply the alt content to the description placeholder. Finally, we apply the mouseover and mouseout hover effects.

It’s great isn’t it! It’s still JavaScript, but it's clean and beautiful. Just like that Ferrari California you’ll be driving if you stick with me. :-)

Oh and before I forget...Yes - I drove the hell outta it!!! ;)

If you enjoyed this post, subscribe for updates (it's free).

Email Address:

3 comments so far

John 11 Sep 12

Hi! This has been the best way to use the image alt text as a caption that I have found. I managed to get the alt test as overlay with css but the transitions do not apply. So it just plopps up on hover. My question is since I would like to apply this method to all the images in a gallery, "How can the code be modified so that it pulls the alt text from each individual image and not just the first one?" As i have it now it takes the alt text from the first image and applies it to all images. The opacity varies from image to image as well. The gallery I am working on is here: http://sunandturtle.blogspot.com/p/gallery.html Thanks for any help!

John 13 Sep 12

Actually it seems it is the last image alt text that the script pulls and displays on all other images. Puzzling to me but I bet it is just a minor glitch that can me modified. The bad thing is that I have not learned JavaScript yet, but just getting this to work makes me want to go and to try, If I only had the time! Any help would be helpful ;)

TVD 15 Sep 12

@John: Excellent choice for an Image Description Overlay script. ;) Your bug analysis was very detailed and really helped us improve the script quicker. We were able to reproduce these issues: 1. The script pulls the last alt text and displays on all images. 2. Overlay opacity not consistent for each image. However, we were not able to reproduce the transition issue you mentioned. Both issues relate to the JavaScript context used during each DOM manipulation. We simply needed to run DOM updates against the specific image instance. The latest script more narrowly defines the current context. I've updated the JavaScript code snippet with the latest script. The latest script fixes both the "Alt Text" issue and the "Overlay Opacity" issue. Note "description_overlay" is a much better variable name than "o". Alas, we have only so much real estate to work with on the article. ;) Please let us know how it works for you. Good luck on your latest project.

Comments are closed