Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

Как сделать всплывающую подсказку?

Автор: Андрей Краснокутский

Дата: 2011-04-03

Наведите мышь на текст и всплывёт блок подсказки.

Данная всплывающая подсказка удобна тем, что:
1. Она не исчезает в самый неподходящий момент (она исчезнет только после того, как вы уберёте курсор с ссылки).
2. Здесь можно менять шрифты, цвета шрифтов, их начертания.

Еще такая подсказка удобна тем, что в этот блок:
кроме текста, который , можно форматировать, сюда можно
вставлять еще и графические изображения:

Привет Друзья!
Рад видеть Вас на своём сайте
http://www.LuksWeb.ru/

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

Наведите мышку на надписи: поясняющий текст и можно вставить картинки и посмотрите пример работы скрипта.

А теперь разберемся как реализовать такие блоки всплывающих подсказок на своём сайте. Сделать это очень просто:

1. Вставляете код JavaScripta Листинга 1 в код своей web-страницы. Обычно это делается между тегами <head> и </head> но в данном случае можно вставить и в тело документа после тега <body> скрипт не привередлив.

Листинг 1.

<script language="JavaScript">
if (parseInt(navigator.appVersion)>= 4)
{
if (navigator.appName == "Netscape")
{
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}

function show(layerName)
{
if (parseInt(navigator.appVersion)>= 4)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}

function cls(layerName){
if (parseInt(navigator.appVersion)>= 4)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
</script>

2. Добавьте на web-страницу код Листинга 2 - оформления блока всплывающей подсказки. Это код CSS и расположить его, также можно между тегами <head> и </head>, но работать будет и в теле документа. А можно этот код вынести и в отдельный файл в стилевую таблицу стилей CSS. Здесь ключевой элемент - идентификатор #text1 к которому и будет привязываться стиль оформления. Если всплывающих блоков на web-странице несколько, то для оформления каждого из них нужно создать отдельный стиль с разными идентификаторами: #text2 , #text3 , #text4 и т.д. Естественно Вы можете создать разные стили оформления для каждого отдельного блока всплывающей подсказки.

Листинг 2.

<style type="text/css">
#text1 {HEIGHT: 80px; LEFT: 0px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 250px; Z-INDEX: 10}
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
</style>

3. Ну и наконец код самого блока всплывающей подсказки. На этой web-странице таких блоков всего два, следовательно и кодов тоже будет 2, у меня это Листинг 3 и Листинг 4. Как вы понимаете таких блоков создается по количеству всплывающих подсказок. Возьмите за основу мои блоки и доработаёте под свой сайт. Располагаются эти блоки кода обязательно в теле web-страницы между тегами <body> и </body> в любом месте. У каждого нового такого блока есть свой идентификатор, который прописывается в коде параметром id="text1" конечно же этот id у каждого блока свой.

Листинг 3.

<table align="left" id="text1" border="1" width="100%" cellspacing="0" cellpadding="5" style="HEIGHT: 80px; LEFT: 300px; TOP: 380px; WIDTH: 300px">
<tr><td bgcolor="#FFFFE1"><div align="left"><font size=2>
Данная всплывающая подсказка удобна тем, что:<br>
1. Она не исчезает в самый неподходящий момент (она исчезнет только после того, как вы уберёте курсор с ссылки).<br>
2. Здесь можно менять <font face="Comic Sans MS, Arial">шрифты</font>, <font color="blue">цвета</font> шрифтов, их <b>начертания</b>.</font></div></td></tr></table>

Листинг 4.

<table align="left" id="text2" border="1" width="100%" cellspacing="0" cellpadding="5" style="HEIGHT: 80px; LEFT: 820px; TOP: 100px; WIDTH: 250px">
<tr><td bgcolor="#FFFFE1"><font size=2>
<strong><font color="red">Еще такая подсказка удобна тем, что в этот блок:</font></strong><br>
кроме текста, который , можно форматировать, сюда можно<br>
вставлять еще и графические изображения:<br>
<p align=center><img src="files/20110403/foto.jpg" width="176" height="204" border="0"></p>
<strong>Привет Друзья!</strong> <br>Рад видеть Вас на своём сайте<br><font color="blue"> http://www.LuksWeb.ru/</font>
</font></td></tr></table>

Как Вы заметили в основе кодов Листинг 3 и Листнг 4 лежит таблица, т.е. здесь применимы все правила действующие в таблицах.

И еще один момент, поднимитесь выше и еще раз наведите курсор мыши на тектовые ссылки. Как видите блоки выводятся в разных местах страницы. Достигается это изменением в коде Листингов 3 и 4 значений LEFT: 300px; TOP: 380px; Напоминаю, что это отступы от левого края (LEFT) и с верху (TOP) меняя числовые значения у этих параметров добейтесь нужного Вам расположения.

Кроме того, можно изменить ширину блока (WIDTH) и высоту блока (HEIGHT) изменив числовые значения.

4. Ну и конечно же оформление самой текстовой надписи при наведении на которую мышки, всплывает подсказка, смотрите код Листинга 5. По сути дела это обычная ссылка, отформатированная с помощью стиля Листинг 2. Приведу код только одной ссылки, второй: можно вставить картинки. Эта ссылка вызывает у меня второй всплывающий блок и здесь нужно обязательно прописать идентификатор блока, причем прописать в 2-х местах: cls('text2') и show('text2') , в данном случае пишем: text2.

Листинг 5.

<a href="javascript:alert('Смотрите и другие подсказки по ходу текста')" onmouseout="cls('text2');" onmouseover="show('text2');"> можно вставить картинки</a>

Для остальных блоков эта ссылка делается аналогично, но со своими идентификаторами и текстом самой ссылки.

Вот и всё. Всплывающие блоки подсказок готовы.

Всего Вам доброго.

Читайте так же:

Как за 9 часов и 45 минут Самостоятельно Сделать свой Сайт?

Загрузить сайт - послушать музыку.

Как продвигать и раскручивать сайт своими силами?

Чего нельзя делать продвигая и раскручивая сайт

Регистрация нового сайта (блога) в поисковых системах.

Как издать (выпустить) собственную электронную книгу?

Просмотров: 20937

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Ольга
Дата: 2011-04-04

Не получается с Google Chrome :(

Комментарии добавил(а): АндрейК
Дата: 2011-04-04

Увы, Google Chrome не поддерживает JavaScript :( Хотя в других отношениях достаточно хороший браузер

Комментарии добавил(а): 1
Дата: 2011-04-06

он еще и в мозилле не работает

Комментарии добавил(а): Сергей (Ессентуки)
Дата: 2011-04-06

Спасибо за рассылку....

Комментарии добавил(а): Сергей (Львов)
Дата: 2011-04-08

Хром очень даже поддерживает JavaScript. Включите в настройках или на худой конец переставьте броузер.

Комментарии добавил(а): Александр
Дата: 2011-04-03

Благодарю Андрей,, как всегда всё классно! С ууважением Александр

Комментарии добавил(а): Александр
Дата: 2011-04-03

Благодарю Андрей,, как всегда всё классно! С уважением Александр

Комментарии добавил(а): Анна
Дата: 2011-04-03

Отлично, обязательно применю !

Комментарии добавил(а): Сергей
Дата: 2011-04-04

Очень полезно. hblg@mail.ru

Комментарии добавил(а): Сергей
Дата: 2011-04-04

Спасибо за урок. Все понятно и просто.

Комментарии добавил(а): Ирина
Дата: 2011-04-04

Спасибо за полезную информацию. Обязательно попробую.

Комментарии добавил(а): Torysan
Дата: 2011-05-04

Как к тексту сделать подсказку я разобралась, а к иконке/картинке как сделать - подскажите, пожалуйста?

Комментарии добавил(а): Torysan
Дата: 2011-05-04

Всё, сообразила, спасибо за урок!

Комментарии добавил(а): Torysan
Дата: 2011-05-06

Теперь другой вопрос: почему при просмотре на мониторах с разной диагональю, подсказки всплывают в разных местах??? Как их закрепить к слову/иконке?

Комментарии добавил(а): ольга
Дата: 2012-04-03

а как картинку вставить?

Комментарии добавил(а): АндрейК
Дата: 2012-04-04

Ольга, внимательно посмотрите на Листинг 4 и поймете как вставлять картинки.

Комментарии добавил(а): Владимир
Дата: 2012-05-11

А как это впихнуть в PHP

Комментарии добавил(а): Сергей
Дата: 2012-07-31

Спасибо за урок Андрей. Я буду частым гостем у Вас на сайте.

Комментарии добавил(а): Мария
Дата: 2014-04-17

Спасибо за подсказки

Добавить Ваш комментарий:

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Дистанционное сопровождение организаций по Охране труда.
Проведение Специальной оценки условий труда (СОУТ).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Почтовая рассылка

Новинка!

Как реально заработать
в Интернете?

"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете

Заработает каждый
от Школьника до Пенсионера!
"Как?"
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2018