QR Код
QR Код на скачивание по второй ссылке
Подсказки всплывающие внутри картинок при наведении(jQuery)
Простой, легко настраиваемый плагин для отображения всплывающих подсказок внутри картинки при наведении.
После на всех нужных вам страницах вставляйте:
Код
<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://ucozzz.3dn.ru/Files/ucoz/script/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>
.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://ucozzz.3dn.ru/Files/ucoz/script/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="Ширина" height="Высота" border="0" class="captify" >
- Источник:Неизвестен
- Для скачивания необходима авторизация -
Всего комментариев: 0 | |
Последние посты с форума
- Новости сайта
- Написал: admin (02.08.2014)
- У кого какой компьютер
- Написал: admin (10.02.2014)
Лучшие посты на форуме
- Считаем до 1000
- Написал: admin (01.09.2013)
- Игра ассоциации
- Написал: Ooh_la_la (15.03.2011)