Мир изумительно хорош, пока работаешь, чтобы ЖИТЬ!
А не живешь, чтобы РАБОТАТЬ!


Всплывающие подсказки (тексты и изображения)


Всплывающие подсказки предназначены для предоставления краткой информации, раскрывающей выделенную фразу или участок изображения. Хорошее описание какой-то проблемы всегда отличается тем, что все термины объяснены. Однако разбавлять текст пояснениями не самый лучший выход. А вот дать возможность по нажатию мышки на фразе или участке изображения получить разъяснение или дополнительную информацию - это очень неплохо! На странице "Быстрый старт - шаг за шагом" уже было показано как это было сделано для изображения.

Имеется механизм, позволяющий выделить часть текста на странице и превратить его во всплывающую подсказку. Для этого достаточно мышью отметить нужный текст и нажать на пиктограмму . Ниже представлено часть окна редактора, чтобы легче было представить где указанная пиктограмма расположена.

Как только вы нажимаете на пиктограмму, выделенный текст превращается в знак вопроса: ?Это пример простой подсказки. Наведите указатель мыши на этот знак вопроса. Чтобы впоследствии отредактировать текст подсказки или убрать ее, превратив опять в текст следует щелкнуть мышью возле(!) знака вопроса и клавишами "влево" или "вправо" подвести маркер на вопрос. Момент, когда можно будет начать работать с подсказкой можно легко определить. В "подвале" редактора на полосе "Путь:" вы увидите в конце текст: "span.fortooltip". После этого щелкните мышью на пиктограмме  и начнется выбор действия для редактирования или удаления подсказки. Вид подсказки можно изменить стилями классов, которые расположены в файле menu.css. Это классы fortooltip - оформление знака вопрос и tooltip для оформления всплывающей части.  

Теперь давайте разберемся как сделать всплывающую подсказку для текста со сложным представлением информации. Например, с изображениями или даже в виде целой странички.

Затем входим в режим "Всплывающие подсказки":

 

Вы можете посмотреть, что получилось прямо на этой странице. Фраза "как сделать всплывающую подсказку" (вверху над снимками) подчеркнута пунктиром. Если навести мышь на эту фразу указатель изменится на знак вопроса. Щелкните на фразе и появится всплывающая подсказка, которую мы приготовили как описано здесь.

Одна и та же фраза может присутствовать в тексте в различных вариантах. Например, "справочник электрика", "в справочнике электрика", "справочником электрика". Если надо объяснить о каком справочнике идет речь, совсем необязательно писать подсказку несколько раз. Обратите внимание, что фразу можно зарегистрировать не только как новую, но и как вариант уже имеющейся фразы. В этом случае набираем исходную фразу и ищем ее, нажав кнопку "найти". В среднем окне появляются варианты этой фразы, которые были занесены ранее. Теперь набираем в том же поле другой вариант фразы и нажимаем кнопку из вкладки добавить: "как вариант фразы". Все! Вариант фразы привязан к подсказке, которая будет всплывать при щелчке на фразе или ее варианте.

Следует знать, что поиск фразы среди множества зарегистрированных можно вести по части фразы. В этом случае в среднее окно с наименованием "есть варианты фразы - укажите необходимый:" будет содержать список со всеми вариантами в которые входит искомый образец. При этом станет активной кнопка "работать с указанным набором". Следует щелкнуть на том варианте, что вас интересует, чтобы он выделился. Потом нажать на кнопку "работать с указанным набором". Справедлтвости ради добавлю, что интерфейс администрирования всплывающих подсказок получился не совсем удачным. Однако, немного попрактиковавшись, вы сможете без особых усилий использовать механизм всплывающих подсказок.

Дополнительно для "продвинутых" пользователей! Иногда при клике на зону изображения следует осуществить переход на другую страницу. Это возможно, если вместо текста для всплывающей подсказки просто добавить ссылку. Например, написать "переход на другую страницу", выделить этот текст и нажать на пиктограмму . В появившемся окне нажать на пиктограмму  - выбор куда должна указывать ссылка и указать нужную страницу сайта для перехода.

В случае, если необходимо во всплывающей подсказке вместо текста вывести изображения из какой-либо папки с изображениями, например организовать меню для перехода на страницы описаний этих изображений, следует эту подсказку начать текстом {шаблон} , который превратить в ссылку (как это сделать описано абзацем выше), но вместо страницы перехода указать любое изображение из нужной папки. Затем на следующей строке можно вставить таблицу. Система вставит в таблицу столько строк, сколько изображений имеется в папке или назначено для вывода. Задайте нужное вам оформление таблицы, ее строк и ячеек. В нужные места вы можете вставить переменные, которые будут заменены их значениями при выводе:

Подробнее читайте в описании переменных подшаблонов. Если вас не устраивает таблица, то возможно после текста {шаблон}, начиная со следующей строки, расположить нужные вам элементы оформления и указанные выше переменные. Таким образом вы указываете системе блок информации, как оформлять вывод информации для каждого изображения из папки, указанной для шаблона.
Иногда весь результат вывода изображений нуждается в общей "обвертке". Например надо поместить все в блок DIV со своими параметрами. В этом случае на следующей строке воспользуйтесь  после блока информации предназначенной для вывода каждого изображения из папки, укажите текст {оформление}. Для перехода на новую строку воспользуйтесь командой, обозначеной пиктограммой  в верхнем ряде пиктограмм редактора. Потом на следующей строке разместите то, что необходимо для обвертки. При этом место, куда будет вставляться блок информации по каждому изображению в это оформление, следует указать переменной {содержимое}. Например это будет выглядеть так:

 Пример вывода изображений из папки. Описанный механизм шаблонов позволяет легко заполнять блоки (div), вставленные в страницу с классом "mega". Если вы прочитаете информацию о мега меню (см. техописание меню), то узнаете, что это блоки информации, которые при загрузке страницы скрываются, а появляются только при наведении указателя мыши на элемент уровневого меню. Впрочем любой элемент страницы, для которого указана функция  MenuIn(this,'id_блока') на событии onmouseover будет вызывать появление мега блока с указанным id_блока. Так вот, если для этого "мега" блока, который появляется при наведении, указать для события onclick функцию GetPopup, то система вызовет эту функцию только при первом появлении этого блока, что позволит заполнить блок содержимым подсказки или сформированным по шаблону как это описано было выше. Функцию можно вызвать так: GetPopup(this,'текст_для_поиска_подсказки') - это позволит заполнить блок, который появляется. Но можно вызвать и так: GetPopup('id_блока_для_заполнения','текст_для_поиска_подсказки'). Это полезно, если требуется заполнить подсказкой блоки, находящиеся внутри появляющегося блока. Если надо заполнить несколько подблоков, то следует указать несколько функций GetPopup, разделенных точкой с запятой.

Важно! Механизм всплывающих подсказок может очень пригодиться, если требуется в разные страницы вставлять одинаковое содержание. Это содержание создается для какой-либо уникальной фразы, например "содержание для пробы". Затем в нужном месте шаблона, подшаблона или непосредственно в содержании страницы можно вставить { ПОДСКАЗКА=содержание для пробы}. Система вместо { ПОДСКАЗКА=........фраза.......} подставит содержимое, сохраненное для фразы. Следует помнить, что шаблоны в этом случае не доступны - вставляется непосредственно сохраненное содержимое.Такая вставка работает гораздо эффективнее, чем  вызов подсказки со страницы сайта как это было описано в начале этой страницы, но влияет на поисковою оптимизацию, так как тескт подсказки изначально включен в содержимое страницы, а не подгружается при вызове подсказки.


WEB-платформа для владеющих PHP
» новации,ускоряющие разработку <IMG>-вых сайтов!