Как сделать красивые подсказки для ссылок | скрипт qTip

Как сделать красивые подсказки для ссылок | скрипт qTip | n-wp.ru

Иногда мне, чтобы решить какую-то нетипичную задачу, приходится изучать java-скрипты, PHP, CSS. И это не удивительно – бывает проще решить эту задачу внедрением скрипта, нежели чем поиском подходящего плагина. Так и в этот раз получилось – мне нужно было создать красивые, полупрозрачные подсказки, появляющиеся над ссылками. Я прибегнул к уже проверенному методу – использовал jQuery-скрипт qTip.

Как сделать красивые подсказки для ссылок | скрипт qTip

Этот скрипт весьма разносторонний, но меня интересовало только создание красивых всплывающих подсказок над ссылками. Буду предельно краток, и выложу готовый рецепт создания таковых.

Для начала нужно скачать скрипт – он крошечный, всего 3 kb. Я использую упрощенную версию для ссылок.

[dl url=”http://dl.dropbox.com/u/2027201/Wordpress/Scripts/qTip.js” title=”скрипт qTip”]

После этого нужно его подключить. Перепишите скрипт в папку с темой (для скриптов я всегда использую папку js в папке с темой). Откройте файл header.php, и до открывающегося тега body вставьте код:

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

Все, скрипт подключен. Не забудбье проверить, подключена ли библиотека jQuery. Теперь скрипт нужно активировать, чтобы он начал действовать. Для этого откройте файл footer.php, и до закрывающегося тега body вставьте код:

tooltip.init();

Все, скрипт начал действовать – он автоматически находит ссылки, и если в них есть title, то заменяет стандартные подсказки, которые отображает браузер, на что-то свое. осталось только задать вид всплывающих подсказок. Для этого откройте файл style.css, и вставьте в него примерно следующее:

div#qTip {
	padding: 5px;
	display: inline-block none;
	background: #000;
	color: #fff;
	font: bold 12px Verdana, Arial, sans-serif;
	text-align: left;
	position: absolute;
	z-index: 6000;
	text-decoration:none;
	text-shadow:0 0 1px #315D0D;
	-moz-opacity:.85 !important;
	-webkit-opacity:.85 !important;
	opacity:.85 !important;
	filter:alpha(opacity=85)
}

Как видите, вы можете добавить к всплывающим подсказкам любое оформление – цвет, шрифты, и даже полупрозрачность. если вы хотите изучить скрипт и его возможности более подробно, посмотреть на результат работы, то посетите его страницу.

[demo url=”http://craigsworks.com/projects/qtip/demos/” title=”qTip”]
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

8 Комментарии

  1. Отличная запись, пригодится когда-нибудь, обзательно.
    Только вот прозрачность задавать всему блоку не очень круто — лучше сделлать прозрачным только фон, м?
    background: rgba(255,255,255,0.5)
    выдаст белый фон (первые три числа, RGB, {255,255,255} дадут белый цвет согласно RGB-построению цвета), прозрачный на 50% (последний параметр, aplha, {0.5} даст 50% прозрачности).
    Подробнее о прозрачных фонах — здесь.

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*