Всплывающая подсказка CSS. Ну как ее сделать?! 18.06.2013

Привет все! Сегодня у нас пост по усовершенствованию своего блога. Владельцам собственных сайтов всегда хочется что то доработать, что то подправить у себя на ресурсе, выделить его из толпы других. Это как художник, который рисует одну картину годами, он постоянно что то подправляет, переделывает, доводит до совершенства.

В общем дело творческое, как говориться, совершенству нет придела! Вот сегодня я хочу рассказать вам про одну замечательную вещь — всплывающая подсказка, CSS нам будет в помощь и немного JavaScript. Но по сути в этом нет ничего сложного!

Думаю вы знаете как выглядит всплывающая подсказка, но кто не в курсе, то вот вам пример который я применил на сайте одного из заказчиков:

Вот сайт, кстати - ekspertishim.ru. На момент написания статьи он еще рабочий. На мой взгляд красивые подсказки, останавливающие внимания на ссылке, подчеркивающие ее присутствие и текст послания.

Всплывающие подсказки CSS действует на ссылки для которых прописан тег title="именно что написано тут, то и появятся в подсказке". Ну давайте ближе к сути. Для начала скачайте вот этот архив и приступим.

Всплывающая подсказка CSS. Начинаем решать задачу.

Для начала нам надо подключить библиотеку jquery и сам файл со скриптом tooltip.js. Для этого, если у вас сайт на CMS, то открываем файл header.php и между тегами <head></head>, как не странно, дописываем следующее:

<head>

...

<script src="<?php bloginfo ('template_url'); ?>/js/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="<?php bloginfo ('template_url'); ?>/js/tooltip.js"></script>

</head>

Тот архив который вы скачали, распаковываем и файлы которые там, закачиваете в папку: /public_html/wp-content/themes/sayt_srtoy/js. Делается это через FTP.

Если у вас просто визитка, без CMS то теги <head></head> находятся в файле index.html, а путь указать следует относительный, т.е. поставить либо .../js , либо ./js.

После того как мы установили все скрипты, переходим к CSS стилям. Тут все просто, открываем syle.css и прописываем вот это:

/* Всплывающие подсказки*/

#easyTooltip{
padding: 3px 10px;
filter:progid:DXImageTransform.Microsoft.Alpha (opacity=80);
— moz-opacity: 0.8;
— khtml-opacity: 0.8;
opacity: 0.8;
font: bold 16px «Trebuchet MS»;
color: #fff;
background: #000;
border: 1px solid #fff;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
z-index: 900;
}

Со стилями можете поэксперементировать, если чего то не поймете, можете отписать в комменты, помогу. Ну вот и готово, все максимально легко и просто! Подписывайтесь на обновления блога, получайте интересные статьи на e-mail. Спасибо за ваше время!

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

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

ВКонтакте