|
|
|
|
Как сделать всплывающую подсказку? Автор: Андрей Краснокутский Дата: 2011-04-03 Наведите мышь на текст и всплывёт блок подсказки.
Довольно часто возникает необходимость по ходу текста на web-странице, сделать какие-то дополнительные комментарии, в виде небольших подсказок или пояснений. Создавать для этого отдельную web-страницу на сайте нецелесобразно. Здесь на помощь придет скрипт, который будет открывать небольшие всплывающие окна, в которых посетители сайта, смогут прочитать дополнительный поясняющий текст. Кроме того, в такие всплывающие подсказки можно вставить картинки проще говоря графические файлы. Наведите мышку на надписи: поясняющий текст и можно вставить картинки и посмотрите пример работы скрипта. А теперь разберемся как реализовать такие блоки всплывающих подсказок на своём сайте. Сделать это очень просто: 1. Вставляете код JavaScripta Листинга 1 в код своей web-страницы. Обычно это делается между тегами <head> и </head> но в данном случае можно вставить и в тело документа после тега <body> скрипт не привередлив. Листинг 1.
2. Добавьте на web-страницу код Листинга 2 - оформления блока всплывающей подсказки. Это код CSS и расположить его, также можно между тегами <head> и </head>, но работать будет и в теле документа. А можно этот код вынести и в отдельный файл в стилевую таблицу стилей CSS. Здесь ключевой элемент - идентификатор #text1 к которому и будет привязываться стиль оформления. Если всплывающих блоков на web-странице несколько, то для оформления каждого из них нужно создать отдельный стиль с разными идентификаторами: #text2 , #text3 , #text4 и т.д. Естественно Вы можете создать разные стили оформления для каждого отдельного блока всплывающей подсказки. Листинг 2.
3. Ну и наконец код самого блока всплывающей подсказки. На этой web-странице таких блоков всего два, следовательно и кодов тоже будет 2, у меня это Листинг 3 и Листинг 4. Как вы понимаете таких блоков создается по количеству всплывающих подсказок. Возьмите за основу мои блоки и доработаёте под свой сайт. Располагаются эти блоки кода обязательно в теле web-страницы между тегами <body> и </body> в любом месте. У каждого нового такого блока есть свой идентификатор, который прописывается в коде параметром id="text1" конечно же этот id у каждого блока свой. Листинг 3.
Листинг 4.
Как Вы заметили в основе кодов Листинг 3 и Листнг 4 лежит таблица, т.е. здесь применимы все правила действующие в таблицах. И еще один момент, поднимитесь выше и еще раз наведите курсор мыши на тектовые ссылки. Как видите блоки выводятся в разных местах страницы. Достигается это изменением в коде Листингов 3 и 4 значений LEFT: 300px; TOP: 380px; Напоминаю, что это отступы от левого края (LEFT) и с верху (TOP) меняя числовые значения у этих параметров добейтесь нужного Вам расположения. Кроме того, можно изменить ширину блока (WIDTH) и высоту блока (HEIGHT) изменив числовые значения.
4. Ну и конечно же оформление самой текстовой надписи при наведении на которую мышки, всплывает подсказка, смотрите код Листинга 5. По сути дела это обычная ссылка, отформатированная с помощью стиля Листинг 2. Приведу код только одной ссылки, второй: можно вставить картинки. Эта ссылка вызывает у меня второй всплывающий блок и здесь нужно обязательно прописать идентификатор блока, причем прописать в 2-х местах: cls('text2') и show('text2') , в данном случае пишем: text2. Листинг 5.
Для остальных блоков эта ссылка делается аналогично, но со своими идентификаторами и текстом самой ссылки. Вот и всё. Всплывающие блоки подсказок готовы.
Всего Вам доброго.
Читайте так же: Как за 9 часов и 45 минут Самостоятельно Сделать свой Сайт? Загрузить сайт - послушать музыку. Как продвигать и раскручивать сайт своими силами? Чего нельзя делать продвигая и раскручивая сайт Регистрация нового сайта (блога) в поисковых системах. Как издать (выпустить) собственную электронную книгу?
Просмотров: 22336 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Ольга Не получается с Google Chrome :( Комментарии добавил(а): АндрейК Увы, Google Chrome не поддерживает JavaScript :( Хотя в других отношениях достаточно хороший браузер Комментарии добавил(а): 1 он еще и в мозилле не работает Комментарии добавил(а): Сергей (Ессентуки) Спасибо за рассылку.... Комментарии добавил(а): Сергей (Львов) Хром очень даже поддерживает JavaScript. Включите в настройках или на худой конец переставьте броузер. Комментарии добавил(а): Александр Благодарю Андрей,, как всегда всё классно! С ууважением Александр Комментарии добавил(а): Александр Благодарю Андрей,, как всегда всё классно! С уважением Александр Комментарии добавил(а): Анна Отлично, обязательно применю ! Комментарии добавил(а): Сергей Очень полезно. hblg@mail.ru Комментарии добавил(а): Сергей Спасибо за урок. Все понятно и просто. Комментарии добавил(а): Ирина Спасибо за полезную информацию. Обязательно попробую. Комментарии добавил(а): Torysan Как к тексту сделать подсказку я разобралась, а к иконке/картинке как сделать - подскажите, пожалуйста? Комментарии добавил(а): Torysan Всё, сообразила, спасибо за урок! Комментарии добавил(а): Torysan Теперь другой вопрос: почему при просмотре на мониторах с разной диагональю, подсказки всплывают в разных местах??? Как их закрепить к слову/иконке? Комментарии добавил(а): ольга а как картинку вставить? Комментарии добавил(а): АндрейК Ольга, внимательно посмотрите на Листинг 4 и поймете как вставлять картинки. Комментарии добавил(а): Владимир А как это впихнуть в PHP Комментарии добавил(а): Сергей Спасибо за урок Андрей. Я буду частым гостем у Вас на сайте. Комментарии добавил(а): Мария Спасибо за подсказки Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |