За основу идеи взят плагин jQuery Drop caption, с помощью которого можно выводить содержимое title у изображений в виде красочной, плавно всплывающей под курсором, подсказки с неким поясняющим картинку текстом.
Данное "украшательство" состоит из двух скриптов: собственно, самого скрипта dropcaptions.js, который реализует вывод всплывающей подсказки у изображений, и скрипта easing.1.3.js, позволяющий настроить и осуществить эту подсказку красиво. При желании, можете перезалить их на собственные файловые хостинги.
Плагин использует библиотеку jQuery, если у вас в шаблоне она не прописана ранее, добавьте к уже указанным скриптам и ее:
<script src='http://jqueryjs.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>
Установка jQuery Drop caption для всплывающей подписи у изображений в блог от Blogger.
Размещение в шаблоне самого плагина.
Проследуйте Шаблон > Изменить HTML. В поле редактирования шаблона найдите строку </head> и прямо перед нею пропишите скрипты, о которых шла речь выше, и скрипт, запускающий плагин jQuery Drop caption для нужных изображений с необходимыми настройками. Общий код, который требуется добавить:
<script src='http://bloggarolla.googlecode.com/files/jquery.dropcaptions.js' type='text/javascript'></script>
<script src='http://bloggarolla.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
<script type="text/javascript">
$(function(){
$('.tooltipimage').dropCaptions();
$('.imagetooltip').dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: 'easeOutElastic',
hideEasing: 'easeInQuint',
hideDelay: 2000
});
});
</script>
В данном варианте учтены два эффекта всплывающих подсказок для изображений с прописанными настройками, однако вы можете отрегулировать скрипт по собственному желанию.
Настройки скрипта:
showSpeed - длительность появления подсказки при наведении курсора мыши на изображение в миллисекундах, по умолчанию - 500;
hideSpeed - длительность исчезновения подсказки в миллисекундах, по умолчанию - 500;
showOpacity - прозрачность всплывающей подсказки (0-1), по умолчанию - .85;
hideOpacity - прозрачность всплывающей подсказки у изображений при исчезновении (0-1), по умолчанию - 0;
showEasing - эффект, который используется при выводе всплывающей подсказки, по умолчанию - ‘swing’;
hideEasing - эффект, который используется при исчезновении всплывающей подсказки у изображений, по умолчанию - ‘swing’;
showDelay - задержка перед выводом подсказки при наведении курсора мыши на изображение в миллисекундах, по умолчанию - 0;
hideDelay - задержка перед исчезновением подсказки после убирания курсора с изображения в миллисекундах, по умолчанию - 0.
Данные настройки нужно изменять либо добавлять непосредственно на этом участке общего кода:hideSpeed - длительность исчезновения подсказки в миллисекундах, по умолчанию - 500;
showOpacity - прозрачность всплывающей подсказки (0-1), по умолчанию - .85;
hideOpacity - прозрачность всплывающей подсказки у изображений при исчезновении (0-1), по умолчанию - 0;
showEasing - эффект, который используется при выводе всплывающей подсказки, по умолчанию - ‘swing’;
hideEasing - эффект, который используется при исчезновении всплывающей подсказки у изображений, по умолчанию - ‘swing’;
showDelay - задержка перед выводом подсказки при наведении курсора мыши на изображение в миллисекундах, по умолчанию - 0;
hideDelay - задержка перед исчезновением подсказки после убирания курсора с изображения в миллисекундах, по умолчанию - 0.
<script type="text/javascript">
$(function(){
$('.tooltipimage').dropCaptions();
$('.imagetooltip').dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: 'easeOutElastic',
hideEasing: 'easeInQuint',
hideDelay: 2000
});
});
</script>
Размещение в шаблоне стилей CSS.
Остается закрепить за всплывающей подписью у изображений стили CSS, дабы придать ей требуемый лоск.
По-прежнему в поле редактирования шаблона найдите уже строку ]]></b:skin> и перед нею впишите код:
.caption {
background: #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
font-family: Georgia;
font-size: 11px;
padding: 4px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
color: #eee;
Повторюсь, что вывод этой замечательной всплывающей подсказки полностью настроен и готов к использованию, но, одновременно с этим, также укажу и некоторые значения стилей CSS, чтобы пользователь смог заменить их на собственные при надобности.Для подбора нужного цвета используйте графический онлайн-редактор.
Значения стилей CSS:
background: #000 - цвет всплывающей подписи;
border: 1px solid #fff - цвет обрамляющей рамки у всплывающей подписи;
font-family: Georgia - шрифт текста подсказки;
font-size: 11px - размер текста у подсказки;
color: #eee - цвет текста;
border-radius: 7px - скругление углов у всплывающей подсказки в пикселях.
Разместив скрипты и значения CSS, сохраните шаблон.border: 1px solid #fff - цвет обрамляющей рамки у всплывающей подписи;
font-family: Georgia - шрифт текста подсказки;
font-size: 11px - размер текста у подсказки;
color: #eee - цвет текста;
border-radius: 7px - скругление углов у всплывающей подсказки в пикселях.
Теперь к изображению, в котором потребуется отобразить оригинальную всплывающую подпись, достаточно добавить один из прописанных в настройках скрипта классов, вследствие чего содержимое, указанное у него в title, будет выводиться в виде симпатичной подсказки. Присутствует два вида подсказок, пример каждой из которых вы можете увидеть в тестовом блоге.
Если вам понравился первый вариант всплывающей подписи у изображения, тогда добавляйте к публикуемым изображениям класс imagetooltip. Общий код с ссылкой изображения будет выглядеть так:
<img alt="" class="imagetooltip" src="ссылка_на_изображение" title="Поясняющий изображение текст." />Если понравился второй эффект, тогда используйте класс tooltipimage. Код в таком случае выглядит следующим образом:
<img alt="" class="tooltipimage" src="ссылка_на_изображение" title="Поясняющий изображение текст." />