Главная > Уроки Dle > Делаем всплывающие подсказки в шаблоне

Делаем всплывающие подсказки в шаблоне


26-05-2011, 20:42. Разместил: Сергей
Я давно искал, как бы заменить стандартные (и достаточно невзрачные) хинты на сайте на что-то более заметное и удобное.
И вот, недавно нашел.

Для того, чтобы хинты на сайте отображались сразу по наведению курсора на картинки и ссылки, у которых задан аттрибут "title" и их внешний вид можно было настраивать, вам потребуется:

1) положить в корень сайта файл mw_hint.js
2) в таблице стилей добавить код
.hint {
background-color: #74B2D4;
line-height: 10px;
color: white;
font-family: Verdana;
font-size: 10px;
width: auto;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid white;
margin: 1px;
padding: 2px;
position: absolute;
visibility: hidden;}


3) в файле шаблона добавить
<script type="text/javascript" src="/mw_hint.js"> </script>


до тега

</head>


После этого, все элементы, имеющие аттрибут "title" будут выглядеть так же, как на этом сайте. Для примера - наведите курсор на текст "Apache's blog" в шапке сайта.



Вернуться назад