Главная » Файлы » Всё для ucoz » Скрипты для uCoz | [ Добавить материал ] |
Красивые всплывающие подсказки
[ · Скриншот ] | 06.03.2011, 21:51 |
Для того, чтобы нам реализовать подобный вид подсказки, нам потребуется, обычная ссылка с прописанным классом tt, в которую мы с вами добавим теги span, также с нужными нам классами, которые будут отвечать за графическое оформление самой подсказки. HTML-Code
Code <a href="адрес ссылки" class="tt"> Текст с подсказкой... <span class="tooltip"> <span class="top"></span> <span class="middle"> Тут текст всплывающей подсказки </span> <span class="bottom"></span> </span> </a> CSS-Code
Code a.tt { position:relative; z-index:24; color:#004b9d; font-weight:bold; text-decoration:none; } a.tt span { display: none; } a.tt:hover { z-index:25; color: #1e9d00; } a.tt:hover span.tooltip { display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #777; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url('http://webo4ka.ru/Ucoz2/krasivye_vsplyvajushhie_podskazki_help.png') no-repeat top; } a.tt:hover span.middle{ display: block; padding: 0 8px; background: url('http://webo4ka.ru/Ucoz2/krasivye_vsplyvajushhie_podskazki_help_fl.png') repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url('http://webo4ka.ru/Ucoz2/krasivye_vsplyvajushhie_podskazki_help.png') no-repeat bottom; } В принципе вот и всё, я не думаю, что у многих администраторов не возникнет проблема изменить прозрачность подсказки filter: alpha(opacity:90); и т.д, его размер, цвет шрифта. | |
Просмотров: 528 | Загрузок: 0 | |
Всего комментариев: 0 | |