2013
26
Ноя

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



Всплывающие подсказки (ToolTips) на CSS мы уже рассматривали. Теперь рассмотрим всплывающие подсказки с использованием скрипта. Часто по ходу текста необходимо сделать поясняющий текст или вставить подсказки с картинками.

К сожалению данный скрипт не работает в Chrome и Firefox

Ниже приведенный код JavaScript размещаем между тегами<head> и </head>

<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>

Для оформления блока используем стили CSS. Размещаем их также между <head> и </head> или в тело <body> и </body> страницы. Можно вывести отдельно в таблицу стилей с идентификатором #text1. Если у вас несколько всплывающих подсказок используйте индетификаторы #text2, #text3 и т.д. Можно задавать различные параметры для подсказок. Здесь можно проявить свое личное творчество.


<style type="text/css"> #text1 { height: 60px;/*высота блока*/ left: 0px;/*Для позиционированного элемента определяет расстояние от левого края родительского элемента*/ position: absolute; /*позиционирование элемента*/ top: 50px;/*Для позиционированного элемента определяет расстояние от верхнего края */ visibility:hidden;/*Элемент становится невидимым */ width:120px;/*ширина*/ z-index:10;}/*размещением по z-оси */ a { text-decoration: none; }/*Убираем подчеркивание у ссылок*/ a:hover { color:#F00;/*цвет текста после наведения*/ text-decoration: underline; }/*Добавляем подчеркивание при наведении курсора мыши на ссылку */ </style>

Код блока всплывающей подсказки располагается в теле web-страницы между <body> и </body>. Каждый блок имеет свой идентификатор, который определяется параметром id="text1",id="text2", id="text3" и т.д.

<table align="left" id="text1" border="1" width="100%" cellspacing="0" cellpadding="5" style="height: 80px; left: 300px; top: 380px; wight: 100px"> <tr><td bgcolor="#FFFF66"><div align="left"><font size=2> Всплывающая подсказка не исчезнет до тех пор, пока вы не уберёте курсор с ссылки.<br> Для подсказки можно изменять <font face="Comic Sans MS, Arial">параметры</font> <font color="blue">шрифтов</font>, их <b>начертания</b>.</font></div></td></tr></table> <table align="left" id="text2" border="1" width="100%" cellspacing="0" cellpadding="5" style="height: 80px; left: 820px; top: 100px; wight: 150px"> <tr><td bgcolor="#FFFFE1"><font size=2><strong><font color="red"><p align="center">В блок подсказки:</p></font></strong> кроме текста, можно вставлять изображения.<br> Сам блок можно форматировать<br /> <p align=center><img src="../../images/lakitu.png" width="128" height="128" border="0"></p> <strong>Привет Друзья!</strong> <br>Добро пожаловать на сайт<br><font color="blue"> http://www.valvas.ru/</font> </font></td></tr></table>

Примечание.   Место расположения всплывающих блоков можно изменять значениями left (отступ от левого края) и top (отступ сверху). Меняя числовые значения этих параметров вы сможете добиться расположения ваших всплывающих блоков на странице. Можно изменить ширину (width) и высоту (height) блока.

Подсказка всплывает при наведении на текст мышки. В принципе это обычная ссылка, которую отформатировали с помощью специального стиля. Для первого блока прописываем идентификатор блока в 2-х местах cls('text1') и show('text1'). Для второго cls('text2') и show('text2').

<a href="javascript:alert('Подсказка первая...')" onmouseout="cls('text1');" onmouseover="show('text1');">поясняющий текст</a> <a href="javascript:alert('Подсказка 2 с картинкой')" onmouseout="cls('text2');" onmouseover="show('text2');">можно вставить картинки</a>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Для остальных блоков все делается также, используя свои идентификаторы.