В этой статье я расскажу, как сделать хинт, как на скрине с красивым эффектом \»всплывания\». Читаем…Итак. С самого начала рассмотрим плюсы и минусы этого дополнения…
Плюсы:
1. В отличие от прошлого хинта, этот начинает прорисовываться до полной загрузки страницы. Как помните, прошлый начинал работать после полной загрузки страницы…
2. Красиво всплывает.
3.Настраиваемый вид
Минусы:
Использует Jquery -> это влияет на скорость загрузки сайта на медленном инете.
Установка:
Открываем header.php (в мфс это файл blocks/head.php) и перед тегом
Добавим код:
<!— tooltip sfb —>
<script type="text/javascript" src="/tooltip.js"></script>
<script>
$(document).ready(function(){$("a").easyTooltip()});$(document).ready(function(){$("img").easyTooltip()});
</script>
<style>#easyTooltip{
padding:10px;
border:1px solid #999999;
background:#f1f1f1;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
color: #666666;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
</style>
<!— !tooltip —>
Если у Вас Jquery подключён был, то тогда заработает. Если не работает, то перед вставленным кодом добавьте строку:
Ну и сами файлы в архиве.
Рассмотрим разбор стиля:
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
Задана прозрачность хинта. color: #666666; — цвет текста на хинте.
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
Здесь задан радиус, по которому скругляются углы. С этими значениями можно поиграть и подобрать нужное — либо вообще удалить.
— background:#f1f1f1; — это фон хинта в HEX формате — можно смело подбирать нужный вам.
— padding:10px; — задан отступ текста от краёв всплывающего хинта.
— border:1px solid #999999; — задан тип границы. В данном случае — это граница толщиной 1px, цвета #999999, которая является непрерывной линией. Подробнее о границах можно почитать в гугле, они бывают как solid, так и dashed, dotted и др. На эту тему есть много статей.
Вот в принципе и всё…
Автор публикации
Отправить комментарий
Вы должны быть зарегистрированы чтобы оставить комментарий.
Вы должны быть зарегистрированы чтобы оставить комментарий.