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

 06.11.2009   

 

 Меню для чёрных диз... 

 24.01.2010   

 

 Оживляем серверные ... 

 24.01.2010   

 

 Оживляем серверные ... 

 11.10.2009   

 

 Выдвижной профиль 

 23.07.2010   

 

 Скрипт добавления с... 


Всего комментариев: 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г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.