Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Подсказки всплывающие внутри картинок при наведении,технологии jQuery

Главная » Скрипты для uCoz » Подсказки всплывающие внутри картинок при наведении,технологии jQuery
Подсказки всплывающие внутри картинок при наведении,технологии jQuery для uCoz

Простой легко настраиваемый плагин для отображения всплывающих подсказок внутри картинки при наведении

Для начала посмотрите ДЕМО

Установка подсказок для картинок:

После /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" >
Просмотров: 875 | Комментариев: 5 | Опубликовал: DizeL | Дата: 24.10.2010

 23.02.2011   

 

 CODE и QUOTE для фо... 

 15.09.2009   

 

 Лучший пользователь 

 06.11.2009   

 

 Новый Софт Блок!! 

 16.09.2010   

 

 CSS меню для вашего... 

 30.11.2009   

 

 Анти-флуд защита в ... 


Всего комментариев: 5
 
  0 5 111qwerty 07.01.2011 15:18:34 это можно привязать к любому движку Цитировать | Редактировать | Удалить
 

 
+1 2 WilLiaM 27.10.2010 20:06:44 И где демо? angry
копипасть хоть нормально.
Ололо....
Цитировать | Редактировать | Удалить
 


 
  0 1 Zargarov 27.10.2010 14:47:03 это для юкоз??? Цитировать | Редактировать | Удалить
 

 
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.