Файлы Скрипты и модификации

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

Описание:
Подсказки всплывающие внутри картинок при наведении(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>


Всё, скрипт подключен. Теперь достаточно присвоить картинке класс captify и прописать подсказку (alt="Текст подсказки), чтобы плагин обработал изображение

Пример:

Код
<img src="Ссылка на картинку" alt="Текст подсказки" width="Ширина" height="Высота" border="0" class="captify" >
Источник: ucozzz.3dn.ru
Загрузка данных...
Материал «Подсказки всплывающие внутри картинок при наведении» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Наш опрос
Как вы нас нашли?
640 ответов
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012-2020 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны