Вы не можете комментировать, т.к. не авторизованы.
|
|
Сергей Колесников
16-03-2012 22:41 (ссылка)
Re: Можно ли изменить шрифт всплывающей надписи-подсказки?
Почитай здесь
Комментарии запрещены
2 комментария
Свернуть
Игорь Акимов
18-03-2012 02:56 (ссылка)
Re: Можно ли изменить шрифт всплывающей надписи-подсказки?
+
Вы не уточнили, где это вам надо применить...
Приходят в голову, как минимум, три варианта:
1. Всплывающие подксазки в операционной системе
2. Всплывающие подсказки в интерфейсе какой-то программы (какой?) или документа в ней (какого?)
3. Всплывающие подсказки на вэб-странице
Могу рассказать по 3-ему варианту.
Стандартная всплывающая подсказка на вэб-странице бывает, например, у рисунка.
Она реализуется с помощью атрибута alt="текст подсказки" в теге рисунка img
Но вообще-то атрибут alt — это АЛЬТЕРНАТИВНЫЙ ТЕКСТ (можно догадаться по сокращению alt)
Он нужен тогда, когда посетитель страницы отключил отображение графики с целью. уменьшить трафик или ускорить загрузку. В этом случае браузер рисует пустую рамку вместо картинки и внутрь помещает данный текст — для того, чтобы посектитель понял хотя бы приблизительно, что там в натуре нарисовано...
Также всплывающую подсказку можно «присобачить» многим другим объектам, например, ссылкам.
Это делается с помощью атрибута title="текст подсказки"
Кстати, в некоторых новых браузерах alt не работает, как подсказка, а только при отключенной графике, а title работает всегда.
Если не применять никаких ухищрений, то текст подсказки быдет стандартный и на стандартном же фоне, заданном общим скином лдибо браузера, либо операционной системы.
Но существуют методы задать подсказке практически любое начертание — т.е. и фон, и шрифт (гарнитуру и кегль) и даже размер поля и вид рамочки всей подсказки.
Это делается с применением специального скрипта (маленькой программки в пару строк, встроенной в код вэб-страницы) и CSS (набора стилевых правил отображение нужного блока)
Вот можете посмотреть пример:
При наведении курсора на имя участника кроме стандартной всплывающей подсказки рядом с курсором (на скриншоте не видна) появляется некий текст-подсказка в заданном месте (под сменяющейся фотографией) и заданного вида, т.е. нужного размера, нужным шрифтом и даже с форматированием (полужирный курсив)
Вот второй пример с наведением курсора на другое имя:
Между тем, идея очень проста:
Каждому участнику придумана такая подсказка и размещена в заданном месте (под фотографией в данном случае), но в ее свойствах указано, что она является СКРЫТОЙ, т.е. не отображается браузером до тех пор, пока посетитель не навёл курсор на определённый объект на странице (имя персонажа).
Если интересно, могу рассказать подробнее и прислать данный скрипт, написанный мной лично несколько лет назад по советам из полезных книжек про DHTML = Dynamic HTML
А вот адрес страницы, с которой сняты скриншоты выше: http://bard-aki.narod.ru/me...
Вы не уточнили, где это вам надо применить...
Приходят в голову, как минимум, три варианта:
1. Всплывающие подксазки в операционной системе
2. Всплывающие подсказки в интерфейсе какой-то программы (какой?) или документа в ней (какого?)
3. Всплывающие подсказки на вэб-странице
Могу рассказать по 3-ему варианту.
Стандартная всплывающая подсказка на вэб-странице бывает, например, у рисунка.
Она реализуется с помощью атрибута alt="текст подсказки" в теге рисунка img
Но вообще-то атрибут alt — это АЛЬТЕРНАТИВНЫЙ ТЕКСТ (можно догадаться по сокращению alt)
Он нужен тогда, когда посетитель страницы отключил отображение графики с целью. уменьшить трафик или ускорить загрузку. В этом случае браузер рисует пустую рамку вместо картинки и внутрь помещает данный текст — для того, чтобы посектитель понял хотя бы приблизительно, что там в натуре нарисовано...
Также всплывающую подсказку можно «присобачить» многим другим объектам, например, ссылкам.
Это делается с помощью атрибута title="текст подсказки"
Кстати, в некоторых новых браузерах alt не работает, как подсказка, а только при отключенной графике, а title работает всегда.
Если не применять никаких ухищрений, то текст подсказки быдет стандартный и на стандартном же фоне, заданном общим скином лдибо браузера, либо операционной системы.
Но существуют методы задать подсказке практически любое начертание — т.е. и фон, и шрифт (гарнитуру и кегль) и даже размер поля и вид рамочки всей подсказки.
Это делается с применением специального скрипта (маленькой программки в пару строк, встроенной в код вэб-страницы) и CSS (набора стилевых правил отображение нужного блока)
Вот можете посмотреть пример:
При наведении курсора на имя участника кроме стандартной всплывающей подсказки рядом с курсором (на скриншоте не видна) появляется некий текст-подсказка в заданном месте (под сменяющейся фотографией) и заданного вида, т.е. нужного размера, нужным шрифтом и даже с форматированием (полужирный курсив)
Вот второй пример с наведением курсора на другое имя:
Между тем, идея очень проста:
Каждому участнику придумана такая подсказка и размещена в заданном месте (под фотографией в данном случае), но в ее свойствах указано, что она является СКРЫТОЙ, т.е. не отображается браузером до тех пор, пока посетитель не навёл курсор на определённый объект на странице (имя персонажа).
Если интересно, могу рассказать подробнее и прислать данный скрипт, написанный мной лично несколько лет назад по советам из полезных книжек про DHTML = Dynamic HTML
А вот адрес страницы, с которой сняты скриншоты выше: http://bard-aki.narod.ru/me...
Комментарии запрещены
Игорь Акимов
18-03-2012 23:01 (ссылка)
Re: Можно ли изменить шрифт всплывающей надписи-подсказки?
+
Почти ничего не понял...
И складывается впечатлене, что вы тоже меня не поняли или недопоняли...
Уточняю по приведённому примеру:
При наведении мыши на имя персонажа (только в самом нижнем разделе страницы «Группа поддержки») слева меняется картинка и под ней появляется всплывающая подсказка, например, в первом случае
«Потомственный геолог»
А во втором — «АдминистраторША»
Обратите внимание на то, что текст подсказки имеет заданное форматирование - он гораздо крупнее стандартного, а также полужирный курсив.
Кроме того, его можно расположить в любом заданном месте странцы — т.е. не рядом с тем местом, куда наведён курсор, а, к примеру, под фотографией «объекта», как сделано сдесь.
Разве это не отвечает на ваш вопрос об увеличении текста подсказки?
Для разбора кода вэб-страницы ( искрипта в нем) щелкните правой кнопкой мыши по странице и дайте команду
«Просмотр HTML»
Затем можно скопировать весь код и вставить в любой текстовый документ.
На скриншоте выше курсор указывает на небольшие фрагменты текста в тегах div
это и сеть те самые подсказки, которые невидимы, т.к. это свойство прописано в таблице стилей для объектов класса под названием PopUp
Другой вариант — в браузере дать команду «Файл — Сохранить как»
И сохранить страницу, выбрав формат HTML (не ВЭБ-АРХИВ!)
Тогда вместе со страницей сохранится папка с тем же именем, в которой будут дополнительные файлы скрипта и таблицы стилей — они подгружаются в страницу во время просмотра из других файлов (картинок и таблиц стилей со скриптами).
Всё это (и документ и одноимённую папку) надо сохранить в какую-то новую папку с осмысленным именем для дальнейших экспериментов. Тогда, запустив этот документ из папки сохранения, вы увидите, что все работает на вашем локальном компьютере. И можно начинать экспериментировать с кодом, сохраняя разные версии с другими именами.
А можно не ковыряться и почитать литературу.
Этот прием подроно описан в книге Джейсона Тиге «CSS и DHTML для WWW»
http://www.internet-technol...
Почти ничего не понял...
И складывается впечатлене, что вы тоже меня не поняли или недопоняли...
Уточняю по приведённому примеру:
При наведении мыши на имя персонажа (только в самом нижнем разделе страницы «Группа поддержки») слева меняется картинка и под ней появляется всплывающая подсказка, например, в первом случае
«Потомственный геолог»
А во втором — «АдминистраторША»
Обратите внимание на то, что текст подсказки имеет заданное форматирование - он гораздо крупнее стандартного, а также полужирный курсив.
Кроме того, его можно расположить в любом заданном месте странцы — т.е. не рядом с тем местом, куда наведён курсор, а, к примеру, под фотографией «объекта», как сделано сдесь.
Разве это не отвечает на ваш вопрос об увеличении текста подсказки?
Для разбора кода вэб-страницы ( искрипта в нем) щелкните правой кнопкой мыши по странице и дайте команду
«Просмотр HTML»
Затем можно скопировать весь код и вставить в любой текстовый документ.
На скриншоте выше курсор указывает на небольшие фрагменты текста в тегах div
это и сеть те самые подсказки, которые невидимы, т.к. это свойство прописано в таблице стилей для объектов класса под названием PopUp
Другой вариант — в браузере дать команду «Файл — Сохранить как»
И сохранить страницу, выбрав формат HTML (не ВЭБ-АРХИВ!)
Тогда вместе со страницей сохранится папка с тем же именем, в которой будут дополнительные файлы скрипта и таблицы стилей — они подгружаются в страницу во время просмотра из других файлов (картинок и таблиц стилей со скриптами).
Всё это (и документ и одноимённую папку) надо сохранить в какую-то новую папку с осмысленным именем для дальнейших экспериментов. Тогда, запустив этот документ из папки сохранения, вы увидите, что все работает на вашем локальном компьютере. И можно начинать экспериментировать с кодом, сохраняя разные версии с другими именами.
А можно не ковыряться и почитать литературу.
Этот прием подроно описан в книге Джейсона Тиге «CSS и DHTML для WWW»
http://www.internet-technol...
Комментарии запрещены
Игорь Акимов
20-03-2012 02:12 (ссылка)
Re: скриптик не подарите?
+
Подарить не жалко...
Только вот сижу и думаю, как это сделать.
Либо придётся пройтись с объяснениями по каждой строчке кода, который в таком виде вам совсем и не нужОн, т.к. вы будете применять какой-то свой дизайн к каким-то своим объектам на странице...
Либо всё-таки загрузить для вас книжку с примерами, чтобы вы попробовали разобраться с её автором.
А я отвечу на дополнительные вопросы, если они у вас появятся...
Книжку уже подготовил.
Добавил в неё авторские примеры всех приёмов с сайта поддержки автором...
Начинаю загружать.
Книга очень хорошо написана.
В первой части подробно описаны все приёмы CSS — можно прочесть только несколько первых глав для понимания сути, а затем пользоваться как справочником при появлении конкретной задачи.
В других частях он (автор) описывает совместную работу CSS + JavaScript = DHTML
И приводит с подробными пошаговыми инструкциями, как построить страницы с динамическими приёмами.
Интересующий вас приём подробно описан в главе 18 в параграфе с названием
«Всплывающий гипертест»
В отдельной папке в архиве с книгой я для вас загружаю примеры с сайта авторской поддержки.
Читая определённую главу (например, эту про всплывающие подсказки), можно открыть подпапку
18_NavigationControls
а в ней подпапку
PopUpHypertext
и посмотреть пример, созданный автором (файл index.html)
Код его отлично изучается и редактируется в программе notepad++ (тоже добавил в архив)
Короче — читайте инструкцию в текстовом файле внутри архива.
Да, ещё такое замечание!
У автора некоторые примеры сделаны в «не нашей» кодировке
Для корректного использования кириллицы в ваших экспериментах желательно преобразовать кодировку к utf-8
Но об этом потом — когда «докопаете» до этой «руды».
А вот и книжка закачалась:
WWW. webbedenvironments. com-dhtml. rar (22,2 Mb)
http://files.mail.ru/KTQIIZ
J.C._Tiague_DHTML&CSS
(Джейсон Тиге «CSS и DHTML для WWW» — книга в DJVU)
Для чтения книги потребуется программа WinDjView-1.0.3 (есть в архиве)
Подарить не жалко...
Только вот сижу и думаю, как это сделать.
Либо придётся пройтись с объяснениями по каждой строчке кода, который в таком виде вам совсем и не нужОн, т.к. вы будете применять какой-то свой дизайн к каким-то своим объектам на странице...
Либо всё-таки загрузить для вас книжку с примерами, чтобы вы попробовали разобраться с её автором.
А я отвечу на дополнительные вопросы, если они у вас появятся...
Книжку уже подготовил.
Добавил в неё авторские примеры всех приёмов с сайта поддержки автором...
Начинаю загружать.
Книга очень хорошо написана.
В первой части подробно описаны все приёмы CSS — можно прочесть только несколько первых глав для понимания сути, а затем пользоваться как справочником при появлении конкретной задачи.
В других частях он (автор) описывает совместную работу CSS + JavaScript = DHTML
И приводит с подробными пошаговыми инструкциями, как построить страницы с динамическими приёмами.
Интересующий вас приём подробно описан в главе 18 в параграфе с названием
«Всплывающий гипертест»
В отдельной папке в архиве с книгой я для вас загружаю примеры с сайта авторской поддержки.
Читая определённую главу (например, эту про всплывающие подсказки), можно открыть подпапку
18_NavigationControls
а в ней подпапку
PopUpHypertext
и посмотреть пример, созданный автором (файл index.html)
Код его отлично изучается и редактируется в программе notepad++ (тоже добавил в архив)
Короче — читайте инструкцию в текстовом файле внутри архива.
Да, ещё такое замечание!
У автора некоторые примеры сделаны в «не нашей» кодировке
Для корректного использования кириллицы в ваших экспериментах желательно преобразовать кодировку к utf-8
Но об этом потом — когда «докопаете» до этой «руды».
А вот и книжка закачалась:
WWW. webbedenvironments. com-dhtml. rar (22,2 Mb)
http://files.mail.ru/KTQIIZ
J.C._Tiague_DHTML&CSS
(Джейсон Тиге «CSS и DHTML для WWW» — книга в DJVU)
Для чтения книги потребуется программа WinDjView-1.0.3 (есть в архиве)
Комментарии запрещены
