Простой легко настраиваемый плагин для отображения всплывающих подсказок внутри картинки при наведении
Для начала посмотрите ДЕМО
Установка подсказок для картинок:
После /head на всех нужных вам страницах вставляйте:
Code
<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://rucoz.com/img/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="Текст подсказки), чтобы плагин обработал изображение
Пример:
Code
<img src="Ссылка на картинку" alt="Текст подсказки" width="Ширина" height="Высота" border="0" class="captify" >