Красивый хинт с использованием Jquery

В этой статье я расскажу, как сделать хинт, как на скрине с красивым эффектом \”всплывания\”. Читаем…Итак. С самого начала рассмотрим плюсы и минусы этого дополнения…

Плюсы:
1. В отличие от прошлого хинта, этот начинает прорисовываться до полной загрузки страницы. Как помните, прошлый начинал работать после полной загрузки страницы…
2. Красиво всплывает.
3.Настраиваемый вид

Минусы:
Использует Jquery -> это влияет на скорость загрузки сайта на медленном инете.

Установка:
Открываем header.php (в мфс это файл blocks/head.php) и перед тегом

</head>


Добавим код:


<!– 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 подключён был, то тогда заработает. Если не работает, то перед вставленным кодом добавьте строку:

<script type="text/javascript" src="/jquery.js"></script>


Ну и сами файлы в архиве.

Рассмотрим разбор стиля:

filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;


Задана прозрачность хинта. color: #666666; – цвет текста на хинте.

border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;


Здесь задан радиус, по которому скругляются углы. С этими значениями можно поиграть и подобрать нужное – либо вообще удалить.

background:#f1f1f1; – это фон хинта в HEX формате – можно смело подбирать нужный вам.
padding:10px; – задан отступ текста от краёв всплывающего хинта.
border:1px solid #999999; – задан тип границы. В данном случае – это граница толщиной 1px, цвета #999999, которая является непрерывной линией. Подробнее о границах можно почитать в гугле, они бывают как solid, так и dashed, dotted и др. На эту тему есть много статей.

Вот в принципе и всё…

0

Понравилась статья? Поделись в соц. сетях:

Похожие новости

Комментарии

Добавить комментарий

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля