В этой статье я расскажу, как сделать хинт, как на скрине с красивым эффектом \”всплывания\”. Читаем…Итак. С самого начала рассмотрим плюсы и минусы этого дополнения…
Плюсы:
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 и др. На эту тему есть много статей.
Вот в принципе и всё…
Автор публикации
