Всплывающие подсказки для изображений — jQuery Drop Captions Plugin

В двух словах плагин Drop Captions принимает в качестве подсказки значение атрибута изображения title и преобразует его в заголовок который появляется только при наведении указателя мыши на изображение, что позволяет поддерживать чистоту сайта и добавить функциональность к заголовку изображения. Данный подход хорошо работает и в браузерах у которых отключен JavaScript, в этом случае заголовок изображения выводится стандартными средствами браузера.

Примеры:

1. Пример 1
2. Пример 2 (Пример демонстрирует работу плагина с другими JavaScript библиотеками)

Скачать:

Скачать jquery.dropcaptions.js

Что хорошего в этом плагине?

1. Размер файла всего 3 КБ
2. Легко настраивается
3. Оформление подсказки на чистом CSS
4. Можно использовать для создания подсказки нескольким изображениям

Пример использования:

Чтобы начать использовать плагин на вашем сайте, все что вам нужно сделать, это применить функцию плагина для изображений у которых вы хотите создать подсказку. Для использования этого плагина вам необходимо иметь подключенный jQuery и плагин на сайте. Пример подключения:

<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>

Вы можете также подключить популярный плагин jQuery easing, для того чтобы добавить некоторые интересные эффекты к подсказке. Вот и все! Теперь вы можете создать эффект подсказки для любого количества изображений на страницах вашего сайта.

Параметры:

showSpeed — целое число. Количество времени (в миллисекундах), которое понадобится для отображения подсказки при наведении мыши на изображения (длительность анимации). По умолчанию: 500
hideSpeed — целое число. Количество времени (в миллисекундах), которое понадобится для скрытия подсказки после того как указатель мыши покинет область изображения (длительность анимации). По умолчанию: 500
showOpacity — число с плавающей точкой, характеризующие степень прозрачности подсказки после ее отображения (задается в пределах от 0 до 1). По умолчанию: 0.85
hideOpacity — число с плавающей точкой, характеризующие степень прозрачности подсказки после ее скрытия (задается в пределах от 0 до 1). По умолчанию: 0
showEasing — строка. Эффект анимации jQuery который будет использоваться при отображении подсказки. По умолчанию: ‘swing’
hideEasing — строка. Эффект анимации jQuery который будет использоваться при скрытии подсказки. По умолчанию: ‘swing’
showDelay — целое число. Время задержки (в миллисекундах) по истечению которого будет показана подсказка, время начинает отсчитываться с момента первого наведения курсора мыши на изображения. По умолчанию: 0
hideDelay — целое число. Время задержки (в миллисекундах) по истечению которого будет скрыта подсказка, время начинает отсчитываться с момента, когда указатель мыши покинет область изображения. По умолчанию: 0

Параметры добавляются при вызове функции плагина:

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

Внешний вид всплывающей подсказки можно настроить через CSS. Например:

.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;
}

Вот собственно и все, используйте на здоровье. :)