Простой легко настраиваемый плагин для отображения всплывающих подсказок внутри картинки при наведении.
Установка подсказок для картинок:
После /head на всех нужных вам страницах вставляйте:
Код <style>
.caption-top, .caption-bottom {
color: #ffffff;
padding: 1.2em;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: default;
border: 0px solid #334143;
background: #000000;
text-shadow: 1px 1px 0 #202020;
}
.caption-top {
border-width: 0px 0px 8px 0px;
}
.caption-bottom {
border-width: 8px 0px 0px 0px;
}
.caption a, .caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
}
.caption a:hover, .caption a:hover {
background: #202020;
}
</style>
<script type="text/javascript" src="http://mega.ucoz.ua/demo/podsk_v_kart/captify.tiny.js"></script>
<script type="text/javascript">
$(function(){
$('img.captify').captify({
// Скорость при наведении курсора
speedOver: 'fast',
// Скорость при отведении курсора
speedOut: 'normal',
// Задержка
hideDelay: 500,
// Эффект анимации: 'fade', 'slide', 'always-on'
animation: 'slide',
// Прозрачность подложки подсказки
opacity: '0.30',
// css класс подсказки
className: 'caption-bottom',
// Позиция подсказки (top или bottom)
position: 'bottom'
});
});
</script>
Всё, скрипт подключен. Теперь достаточно присвоить картинке класс captify и прописать подсказку (alt="Текст подсказки), чтобы плагин обработал изображение :
Код <img src="Ссылка на картинку" alt="Текст подсказки" width="Ширина" border="0" class="captify" >
Вот и всё .
Пример:
| 
