3333
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
Скрипт всплывающие подсказки (Tooltips)
Установка
1. JS:
Устанавливаем перед тегом
Код:
</head>
Код:
<script type="text/javascript" src="{tpl_url}/js/unitip.js"></script>2. Html:
Теперь чтобы наш title отображался у нужного нам элемента, например нужной ссылки, следует прописать ей class="tip":
Код:
<a class="tip" href="#" title="Частная коллекция готовых дизайнерский решений, для вашего сайта или чата.">хаки и скрипты</a>
3. CSS:
Так как наша подсказка отображается отдельными изображениями, в css стилях давайте их пропишем:
Код:
/* unitip css */
#unitip {
position: absolute;
z-index: 1000;
top: -1000px;
color: #fff;
font:11px Verdana,Arial,Helvetica, sans-serif; color:#CED9E8;
display: none;
}
#unitippoint, #unitipmid, #unitipcap {
position: relative;
top: 0px;
left: 0px;
width: 145px;
display: block;
}
#unitippoint {
background: url('../images/TipPoint.png') no-repeat;
height: 19px;
overflow: hidden;
}
#unitipmid {
background: url('../images/TipMid.png') repeat;
width: 115px;
height: auto;
padding: 5px 15px;
}
#unitipcap {
background: url('../images/TipCap.png') no-repeat;
height: 7px;
overflow: hidden;
}
5.Ну немного о настройках:
1.По умолчанию UniTip использует png изображения.
2.Первый набор переменных в коде javascript определяет, когда будет использоваться подсказка:
1.var uniTipTag = "a,img"; - Определяются теги к которым будет использован tooltip. Отделять запятой и без пробела.
2.var uniTipClass = "TipEx"; - Определяются классы к которым будет применяться tooltip. Если класс не указан, то tooltip будет использован для всех тегов указанных выше.
3.Второй блок переменных определяет смещение курсора:
1.var uniTipX = 0; - Горизонтальное смещение курсора.
2.var uniTipY = 15; - Вертикальное смещение курсора.
Теперь можно добавить содержимое для самой подсказки в атрибуты title для ссылок, и alt для изображений. При использовании HTML в подсказках возможна некоторая задержка при появлении,ну вроде все пользуемся.
Можешь почитать и вот эту статейку "Настраиваем разный дизайн короткой новости по чету и нечету"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.