» » >
Всплывающая подсказка Title для uCoz
·
22.09.2013, 10:33

Всем доброго дня, в этой статье мы будем создавать всплывающею подсказку благодаря знаниям jQuery и JS, смотрим демо.

Шаг 1 - Установим JS:

Для начало нам следует установить основной js, который будет отвечать за подсказку, для этого в низ страницы перед закрывающим тегом </body> установим следующей js:

JS

<script type="text/javascript" src="http://ucoz-helper.ucoz.com/js_jquery/unitip.js"></script>
Шаг 2 - Установим HTML:

Теперь для отображение подсказки, нам следует прописать ссылки нужным нам класс class="tip", обратите внимание что текст подсказки прописан в параметре title:

HTML

<a class="tip" href="#" title="Частная коллекция готовых дизайнерский решений, для вашего сайта или чата.">www.center-dm.ru</a>
Шаг 3 - Установим CSS:

Теперь нам следует прописать css стили, которые будут отвечать за отображение подсказки, которая реализована отдельными изображениями:

CSS-Code

/* 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(http://ucoz-helper.ucoz.com/js_jquery/TipPoint.png) no-repeat;  
  height: 19px;  
  overflow: hidden;  
}
   
#unitipmid {  
  background: url(http://ucoz-helper.ucoz.com/js_jquery/TipMid.png) repeat;  
  width: 115px;
  height: auto;  
  padding: 5px 15px;
}
   
#unitipcap {  
  background: url(http://ucoz-helper.ucoz.com/js_jquery/TipCap.png) no-repeat;  
  height: 7px;  
  overflow: hidden;  
}


Категория: jQuery и JS | Добавил: tashkent97
Просмотров: 1440 | Загрузок: 383 | Источник: center-dm.ru | Рейтинг: 3.0/2
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<