Красивый хинт (подсказка)

SUAREZ добавил 1332005758 в раздел UCOZ Другие скрипты
Это плагин всплывающей подсказки с возможностью выбора стороны "выскакивания" всплывающей подсказки: сверху, справа, снизу, слева. Выглядит очень красиво и совершенно не нагружает сайт.





Перейдём к установке нашей кнопки:

1. Открываем ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> Нижняя часть сайта и вставляем туда следующие скрипты:

Code
<script type="text/javascript" src="http://updatesite.ru/js/jquery.tipsy.js"></script>
<script type='text/javascript'>
  $(function() {  
  $('.north').tipsy({gravity: 'n'});
  $('.south').tipsy({gravity: 's'});
  $('.east').tipsy({gravity: 'e'});
  $('.west').tipsy({gravity: 'w'});  
  });
</script>


2. Открываем ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> Таблица стилей CSS и добавляем следующее:

Code

.tipsy {
  padding: 5px;
  font-size: 11px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  background-repeat: no-repeat;
  background-image: url('http://updatesite.ru/tipsy.gif');
}

.tipsy-inner {
  padding: 5px 8px 4px 8px;
  background-color: black;
  color: white;
  max-width: 200px;
  text-align: center;
}
.tipsy-inner {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
.tipsy-north {
  background-position: top center;
}
.tipsy-south {
  background-position: bottom center;
}
.tipsy-east {
  background-position: right center;
}
.tipsy-west {
background-position: left center;
}

3. Установка на этом закончена. Теперь просто необходимо добавить к ссылке соответственный класс:

Code
<a class='east' href='http://updatesite.ru' title='Подсказка появляется слева'>Подсказка слева</a>
<a class='north' href='http://updatesite.ru' title='Подсказка появляется снизу)'>Подсказка снизу</a>
<a class='south' href='http://updatesite.ru' title='Подсказка появляется сверху'>Подсказка сверху</a>  
<a class='west' href='http://updatesite.ru' title='Подсказка появляется справа'>Подсказка справа</a>
+43
Теги: Хинт, подсказка, Всплывающая, Hint
Автор: suarez
Источник: http://updatesite.ru
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать материалы и сохранять их в личном кабинете.
Вы не можете добавлять комментарии

2 комментариев

  1. TheSkiveee TheSkiveee

    1354963215 | Ответить | IP | Редактировать | Удалить

entry
Свернуть
Развернуть мини-чат
0