Иногда текст хочется немного приукрасить, добавить ему динамичности. А иногда это может иметь и еще практическую ценность. Например, создавая текст с некоторыми новыми словами или сокращениями, хочется указать подсказку, описывающую этот термин: Как можно реализовать такую подсказку (HINT по-английски)? Для Ucoz всё проще из-за наличия библиотеки jQuery, хотя и в случае её отсутствия можно реализовать подобную схему, но обойдется она "бОльшей кровью". Начнем, пожалуй, с самой идеи - слово и его описание: Слово : Symbian Описание : операционная система для мобильных устройств
В тексте их надо выделить при помощи разметки - SPAN для объясняемого слова (аббревиатуры) и DIV для самого объяснения: получим: Symbian
- операционная система для мобильных устройств
Но на странице такая конструкция будет выглядеть некрасиво и не так, как нам надо. Да и слово было бы не плохо как-то выделить на странице, чтобы было ясно что "с ним что-то не так". Чтобы скрыть блок DIV с объяснением и выделить искомое слово добавим в стили два класса - hinter для слова и hint_help для его расшифровки: .hinter { border-bottom: 1px dashed red; font-weight : bold; } .hint_help { border: 1px solid #55b7dc; font-weight : normal; position: absolute; background-color: #cfcfcf; padding: 9px; width: 220px; display: none; } Для hinter мы указали сделать подчеркивание и выделение жирным, для hint_help - скрыли от показа, определили его "плавающее" расположение на странице, определили размер блока при показе, фон и границу блока, а так же дополнительно прописали "нормальный" шрифт (это надо для того, чтобы настройки "родительского" блока SPAN не придали жирности текста в блоке DIV. Code
Symbian
- операционная система для мобильных устройств
Теперь добавим код JavaScript, который займется обработкой событий "наезда" курсора мышки на текст и вывода подсказки, а так же добавим код, который спрячет подсказку, когда курсор покинет пределы объясняемого слова. Вставим в конец страницы такой код (считаем, что jQuery подключено): Code
Что делает данный код? Для каждого элемента типа SPAN, относящегося к классу hinter прописываются JavaScript-функции для событий MouseOver, MouseOut. При наведении мыши мы указываем для первого "дочернего" элемента внутри блока SPAN (а это будет DIV с описанием) указываем позицию вывода на экране (чуть ниже и правее слова) и отображаем его, используя функцию SHOW(). Если же слово находится дальше чем 600 пикселей от начала страницы, то, чтобы не вывести наш блок за пределы экрана, сделаем простую корректировку - сместим точку вывода блока влево: Возможно, стоит подумать над каким-то другим способом по определению "запредельности" вывода подсказки, еще можно попробовать реализовать вывод подскажки выше слова, если подсказка будет выводить ниже границы экрана, но, думаю, это будет сложнее и не оправдает себя. Чего не стоит делать, так это пояснять элементарные (для аудитории вашей статьи) слова и объяснять все или почти все слова.
