На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.

 

В случае отключения JavaScript подпись будет отображаться стандартными средствами браузера. Для начала мы рассмотрим как подключить этот плагин, а затем как его вызвать, для начала мы разместим код ниже между тегами head:

Но в чем же преимущества данного плагина?

  • Он занимает всего 3 KB
  • Обратная совместимость
  • Очень просто конфигурируется
  • Использует стили CSS
  • Один плагин используется для всех изображений

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

Опции используются при вызове скрипта:

Последним этапом будет рассмотрение стилей CSS. Стиль подписей можно задавать с помощью класса .caption:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.