drop captions takes an image’s title attribute and converts it into a caption that appears only when the mouse is moved over the image. This allows me to maintain a clean look to the site, while enabling the functionality of captions. It’s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text.

What’s So Great About This Plugin?

• It’s a mere 3 KB (about half that if you compress it)
• Completely degradable
• Easily configurable
• Styled with CSS
• Reusable on multiple images

How to Use

To get up and running, all you need to do is apply the plugin to any images on your page. To use the plugin you’ll need to have a copy of jQuery, or point to jquery on Google, and the plugin. Place the plugin files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dropcaptions.js"></script>
<script type="text/javascript">
$(function(){
	$('.captionedimage').dropCaptions();
});
</script>

You can also include the popular jQuery easing plugin to add some nice easing effects to the captions.
That’s it! You can apply drop captions to any number of images on a page.  Check out the demo code for working examples.

Options

The following options are configurable:

• showSpeed – how long (in milliseconds) it should take to display a caption when mousing over an image. Default: 500
• hideSpeed – how long (in milliseconds) it should take to hide a caption when mousing out from an image. Default: 500,
• showOpacity – The final opacity of the caption once displayed (0-1). Default:   .85
• hideOpacity – The final opacity of the caption once displayed (0-1). Default:   0
• showEasing – The style of easing to use when displaying a caption. Default:  ‘swing’
• hideEasing – The style of easing to use when hiding a caption. Default:  ‘swing’
• showDelay – how long of a delay (in milliseconds) it should take before the animation of showing a caption begins on mouseover. Default: 0
• hideDelay – how long of a delay (in milliseconds) it should take before the animation of hiding a caption begins on mouseout. Default: 0

Options are added when calling the script:

$('.captionedimage').dropCaptions({
showSpeed: 2000,
 hideSpeed: 1000,
 showOpacity: 1,
 hideOpacity: 0,
 showEasing: 'easeOutElastic',
 hideEasing: 'easeInQuint',
 hideDelay: 2000
});

The caption area can by styled via CSS and targeting the caption class. For example:

.caption {
 background: #333;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
 border-left: 1px solid #666;
 border-top: 1px solid #666;
 font-family: Verdana;
 font-size: 11px;
 padding: 4px;
 -moz-border-radius-bottomright: 6px;
 -moz-border-radius-bottomleft: 6px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 color: #eee;
}

The article source:http://www.catchmyfame.com/2009/10/23/jquery-drop-captions-plugin-released/