Сегодня хочу начать еще одну рубрику сайта, где я буду время от времени представлять уже готовые скрипты, найденные мною на просторах интернета (в основном это англоязычный сегмент интернета). Если потребуется, то я их немного модернизирую (читай - переведу) и выложу в свободный доступ. Вот сегодня начну с простого скрипта всплывающих подсказок, написанный на языке JavaScript, который на буржуйском языке носит название Sticky Tooltip script.
Этот скрипт добавляет так называемый Тултип (ToolTip – всплывающая подсказка) к HTML элементам, когда указатель мыши проходит над ними. Эта подсказка может быть закреплена нажатием клавиши “s” или правым щелчком мыши чтобы дать доступ к элементам, находящимся внутри всплывающей подсказки. Это все лучше один раз увидеть, чем два абзаца описывать)))
Демонстрация (подвигайте мышкой над следующими элементами):
 |
 |
 |
Запорожье - город в Украине, административный центр Запорожской области, расположен на реке Днепр. Является одним из наиболее крупных административных, индустриальных и культурных центров юга Украины.
Москва — столица Российской Федерации, город федерального значения, административный центр Центрального федерального округа и Московской области (в состав которой не входит). Крупнейший по численности населения город России и Европы
Окленд (англ. Auckland) — крупнейший город Новой Зеландии с населением около 1,4 миллиона человек (2008), что составляет более четверти всего населения страны.
Теперь последовательность действий для установки скрипта на страницу.
Шаг 1. Вставить следующий код в тег <head></head> страницы
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"></script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" />
Этот код требует наличия трех файлов:
- jquery.min.js
- stickytooltip.js
- stickytooltip.css
Их Вы можете СКАЧАТЬ одним архивом, бесплатно.
Шаг 2. На странице необходимо сделать HTML разметку по примеру, который показан ниже.
Любое содержимое страницы... <a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0" data-tooltip="sticky1">Москва</a> <a href="http://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BF%D0%BE%D1%80%D0%BE%D0%B6%D1%8C%D0%B5" data-tooltip="sticky2">Запорожье</a> <img src="http://img222.imageshack.us/img222/269/laketaupo.jpg" data-tooltip="sticky3" width="91" border="0" height="61"> Любое содержимое страницы... <!--HTML код для скрипта--> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:200px"> <img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br /> <a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0">Москва</a> — столица Российской Федерации, город федерального значения, административный центр Центрального федерального округа и Московской области (в состав которой не входит). Крупнейший по численности населения город России и Европы </div> <div id="sticky2" class="atip" style="width:262px"> <img src="http://img210.imageshack.us/img210/6531/dneproges.jpg" /><br /> <a href="http://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BF%D0%BE%D1%80%D0%BE%D0%B6%D1%8C%D0%B5">Запорожье</a> - город в Украине, административный центр Запорожской области, расположен на реке Днепр. Является одним из наиболее крупных административных, индустриальных и культурных центров юга Украины. </div> <div id="sticky3" class="atip"> <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" /> </div> </div> <div class="stickystatus"></div> </div>
Можете также ориентироваться на общий шаблон:
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Содержимое первого тултипа ...
</div>
<div id="sticky2">
Содержимое второго тултипа ...
</div>
<div id="sticky3">
Содержимое третьего тултипа ...
</div>
</div>
<div class="stickystatus"></div>
</div>
а все элементы, отображаемые с подсказкой должны иметь параметр data-tooltip, оформленный по шаблону:"data-tooltip=tooltipid"
Например:
<a href="http://valex.net.ru" data-tooltip="sticky1">Сайт для веб мастера</a>
Шаг 3 - Настройка
Открывайте файл stickytooltip.js где в первых строчках кода можете увидеть переменные, отвечающие за настройку скрипта:
tooltipoffsets: [20, -30],
fadeinspeed: 1000,
rightclickstick: true,
stickybordercolors: ["black", "darkred"],
stickynotice1: ["Нажмите \"s\"", "или правый клик", "чтобы закрепить"],
stickynotice2: "Нажмите мышкой вне этого блока, чтобы скрыть его",
я оставил там русскоязычные комментарии, так что, думаю разобраться не составит труда.
И еще раз напомню о том что скачать все необходимые файлы можно по этой ссылке.
Если у вас возникли какие-либо трудности, обращайтесь ко мне через форму обратной связи и я всего за 5$ установлю и настрою этот скрипт на вашем сайте.
zox | 24.02.2010, 19:50
Давно искал скрипт всплывающей подсказки, всё просто и понятно объяснено, справится даже новичок.
Вот за этот скрипт большое спасибо!