Как сделать всплывающую подсказку?
Автор: Андрей Краснокутский
Дата: 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 минут Самостоятельно Сделать свой Сайт?
Загрузить сайт - послушать музыку.
Как продвигать и раскручивать сайт своими силами?
Чего нельзя делать продвигая и раскручивая сайт
Регистрация нового сайта (блога) в поисковых системах.
Как издать (выпустить) собственную электронную книгу?
Просмотров: 22769
Не получается с Google Chrome :(
Увы, Google Chrome не поддерживает JavaScript :( Хотя в других отношениях достаточно хороший браузер
он еще и в мозилле не работает
Хром очень даже поддерживает JavaScript. Включите в настройках или на худой конец переставьте броузер.
Благодарю Андрей,, как всегда всё классно!
С ууважением Александр
Благодарю Андрей,, как всегда всё классно!
С уважением Александр
Отлично, обязательно применю !
Очень полезно. hblg@mail.ru
Спасибо за урок. Все понятно и просто.
Спасибо за полезную информацию. Обязательно попробую.
Как к тексту сделать подсказку я разобралась, а к иконке/картинке как сделать - подскажите, пожалуйста?
Всё, сообразила, спасибо за урок!
Теперь другой вопрос: почему при просмотре на мониторах с разной диагональю, подсказки всплывают в разных местах??? Как их закрепить к слову/иконке?
Ольга, внимательно посмотрите на Листинг 4 и поймете как вставлять картинки.
Спасибо за урок Андрей. Я буду частым гостем у Вас на сайте.
|