|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как создать всплывающие подсказки для гиперссылок  

Как создать всплывающие подсказки для гиперссылок

Оглавление
Как создать всплывающие подсказки для гиперссылок
Страница 2
Страница 2 из 2

Пример

Далее приведен HTML-код простой Web-страницы, содержащей все те же _ три гиперссылки, при наведении на которые курсора мыши ниже будут появляться подсказки.

<HTML> <HEAD>

<TITLE>Пример</TITLE> <SCRIPT TYPE="text/javascript"> function hrfOnMouseOver(pText) { var outputObject = document.all["output"]; var textObject = document.createTextNode("") textObject.nodeValue = pText; outputObject.appendChiId(textObject); }

function hrfOnMouseOut() { var outputObject = document.all["output"]; outputObj ect.removeChild(outputObject.firstChild); } </SCRIPT> </HEAD> <BODY>

<P><A HREF="#" ONMOUSEOVER="hrfOnMouseOver('На страницу 1');" ONMOUSEOUT="hrfOnMouseOut();">Страница 1</А></Р> <P><A HREF="#" ONMOUSEOVER="hrfOnMouseOver('На страницу 2');" ONMOU3EOUT="hrfOnMouseOut() ; ">Страница 2</А></Р>

<P><A HREF="#" ONMOUSEOVER="hrfOnMouseOver('На последнюю страницу');" ONMOUSEOUT="hrfOnMouseOut () ; ">Страница 3</А></Р> <P ID="output"></P> </BODY> </HTML>

Здесь для вывода текста подсказок мы использовали обычный абзац output. Изначально он пуст, поэтому для вывода текста нам придется создать фрагмент текста и поместить его в этот абзац в качестве потомка. Все это делается

Знакомыми нам ПО главе 5 методами createTextNode И appendChild. Чтобы

скрыть подсказку после "увода" курсора мыши с гиперссылки, нам достаточно удалить этот текстовый фрагмент, для чего мы воспользуемся также знакомым нам методом removeChild.

Решение 3

Воспользоваться универсальным объектом PopupTip (листинг 7.1), реализующим вывод настоящих всплывающих подсказок для любых элементов страницы. Его функция-конструктор имеет очень простой формат вызова:

PopupTip([<Стилевой класс для подсказки>]);

Единственным, да и то необязательным, параметром в конструктор передается имя стилевого класса, который будет привязан к свободно позиционируемому контейнеру, реализующему всплывающую подсказку. Это имя передается в строковом виде. Если же оно не указано, конструктор задаст для создаваемого контейнера параметры по умолчанию (в этом случае подсказка будет иметь тот же вид, что и системные всплывающие подсказки Windows).

Что касается стилевого класса, который мы привязываем к свободно позиционируемому контейнеру — всплывающей подсказке, то мы можем использовать в нем любые атрибуты и любые их значения, задавая внешний вид подсказки в довольно широких пределах. В частности, мы можем задать цвет текста и фона, шрифт, выравнивание, рамку, отступы и границы. Единственное: нам не следует задавать в нем метод позиционирования (атрибут стиля position) и координаты (атрибуты стиля left и top), поскольку это сделает сам объект PopupTip.

Для привязки к элементу страницы всплывающей подсказки используется метод setTip этого объекта. Вот формат его вызова:

setTip(<Элемент страницы>[, <Текст всплывающей подскаэки>]);

Если второй параметр не указан, в качестве текста подсказки будет использовано значение свойства title, которое поддерживается всеми объектами — элементами страницы и предоставляет доступ к текстовому описанию данного элемента. Это описание задается атрибутом title, поддерживаемым практически всеми тегами. Собственно, об этом уже говорилось ранее.

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

Метод removeTip объекта PopupTip позволяет удалить всплывающую подсказку, привязанную ранее к элементу страницы:. Формат его вызова очень прост:

removeTip(<Элемент страницы>);

Оба этих метода значения не возвращают.

Свойство popupTipstyle объекта PopupTip предоставляет доступ к стилю свободно позиционируемого контейнера— всплывающей подсказки. С помощью этого свойства мы можем изменить внешний вид всплывающей подсказки программно. Но, опять же, не следует менять метод позиционирования (свойство position) и координаты (атрибуты left и top).

Свойство enabled этого объекта позволит временно запретить вывод всплы-вающих подсказок, для чего достаточно присвоить этому свойству значение false. Чтобы разрешить вывод подсказок, нужно присвоить этому свойству значение true.

Листинг 7.1. Объект popupT.ip, реализующий всплывающие подсказки для элементов стрзниц

// Счетчик созданных к данному времени экземпляров объекта PopupTip var j sps_PT_counter = 0;

// Список всех созданных к данному времени экземпляров объекта PopupTip var jsps_PT_list = new Array();

// Функция-конструктор function PopupTip(pClassName) {

// Создаем свободно позиционируемый контейнер, который и будет // реализовывать всплывающие подсказки, и задаем его стиль var popupElement = document.createElement("DIV"); if (pClassName)

popupElement.className = pClassName else { popupElement.style.backgroundColor = "#FFFFCC"; popupElement.style.borderLeftStyle = "solid"; popupElement.style.borderLeftColor = "#CCCCCC"; popupElement.style.borderLeftWidth = "1"; popupElement.style.borderTopStyle = "solid"; popupElement.style.borderTopColor = "#CCCCCC"; popupElement.style.borderTopWidth = "1"; popupElement.style.borderRightStyle = "solid"; popupElement.style.borderRightColor = "#CCCCCC"; popupElement.style.borderRightWidth - "1"; popupElement.style.borderBottomStyle = "solid"; popupElement.style.borderBottomColor = "#CCCCCC"; popupElement.style.borderBottomWidth = "1"; popupElement.style.paddingLeft = "2"; popupElement.style.paddingTop = "1"; popupElement.style.paddingRight = "2"; popupElement.style.paddingBottom = "1"; popupElement.style.fontSize = "80%"; }

popupElement.style.position = "absolute"; popupElement.style.visibility = "hidden"; var tipText = document.createTextNode(""); popupElement.appendchild(tipText); document.body.appendChild(popupElement),-// Объявляем общедоступные свойства и методы this.popupTipStyle = popupElement.style; this.enabled = true; this.setTip = mjspsPTSetTip; this.removeTip = mjspsPTRemoveTip; // Список всех всплывающих подсказок this.tips = new Array(); // Объявляем различные служебные свойства this.popup = popupElement; var piObject = jspsGetPrograminfoO ;

this.isIEorOpera = ((piObject.programName == JSPS_GPI_MSIE) ||(piObject.programName == JSPS_GPI_OPERA)); // Номер данного экземпляра объекта в списке jsps_PT_list this.myWumber = jsps_PT_counter;

// Заносим данный экземпляр объекта в список jsps_PT_list jsps_PT_list[jsps_PT_counter] = this;

// Увеличиваем счетчик экземпляров этого объекта на единицу, // подготавливая его для создания нового экземпляра j sps_PT_counter++; }

// Служебная функция, возвращающая индекс элемента массива tips, // соответствующего переданному ей элементу страницы (параметр pElement) function jspsPTGetElementIndex(pPTObject, pElement) { var elementlndex = -1;

for (var i = 0; i < pPTObject.tips.length; i++) if (pPTObject.tips[i][0] == pElement) elementlndex = i; return elementlndex; }

// Функция, реализующая метод setTip function mjspsPTSetTip(pElement, pTipText) {

// Проверяем, передан ли параметр pTipText, и, если не передан,

// извлекаем текст подсказки из свойства title

var isTipInTitle = false;

if (!pTipText) { pTipText = pElement.title;

// "Позаимствовав" текст подсказки из свойства title, не // забудем присвоить этому свойству пустую строку, чтобы подавить // вывод всплывающих подсказок самим Web-обозревателем pElement.title = "";

// Признак, был ли текст подсказки взят из свойства title isTipInTitle = true; } // Проверяем, не находится ли уже в массиве tips текст подсказки для // данного элемента страницы

var elementIndex = jspsPTGetElementIndex(this, pElement) ; if (elementIndex == -1) {

// Если подсказка для данного элемента страницы еще не создана, // добавляем ее в массив tips if (this.isIEorOpera) {

//В случае Internet Explorer и Opera мы сначала сохраняем // уже привязанные к событиям onMouseOver и onMouseOut этого // элемента страницы обработчики var onMouseOverHandler = null; var onMouseOutHandler = null; if (pElement.onmouseover)

onMouseOverHandler = pElement.onmouseover; if (pElement.onmouseout)

onMouseOutHandler = pElement.onmouseout; // Создаем новый элемент массива tips, который сам является // массивом. Вот элементы вложенного массива: элемент // страницы, текст подсказки, признак, был ли этот текст // взят из свойства title, и сохраненные ранее обработчики // событий onMouseOver и onMouseOut this.tips[this.tips.length] = new Array(pElement, pTipText, isTipInTitle, onMouseOverHandler, onMouseOutHandler); // Привязываем обработчики к событиям элемента pElement.onmouseover = jspsPTShowPopupTipIEandOpera; pElement.onmouseout = jspsPTHidePopupTipIEandOpera; } else {

// В случае Firefox все несколько проще. Вложенный массив

// будет содержать только элемент страницы, текст подсказки и

// признак, был ли этот текст взят из свойства title

this.tips[this.tips.length] = new Array(pElement, pTipText, isTipInTitle) ;

// Привязываем функции-слушатели к событиям элемента pElement.addEventListener("mouseover", jspsPTShowPopupTipFF, false);

pElement.addEventListener("mouseout", jspsPTHidePopupTipFF, false); } // Создаем в экземпляре объекта, соответствующем элементу // страницы, свойство ptobjectNumber и присваиваем ему // порядковый номер экземпляра объекта PopupTip в массиве // jsps_PT_list. Он понадобится нам, чтобы получить доступ //к экземпляру этого объекта из функций-обработчиков событий //и функций-слушателей pElement.ptObjectNumber = this.myNumber; } else {

// Если же к данному элементу страницы уже была привязана // подсказка, мы только меняем ее текст this.tips[elementIndex][1] = pTipText; this.tips[elementlndex][2] = isTipInTitle; } }

// Функция, реализующая метод removeTip function mjspsPTRemoveTip(pElement) {

// Получаем индекс элемента массива, где хранится текст подсказки // для данного элемента страницы

var elementlndex = jspsPTGetElementlndex(this, pElement); if (elementlndex > -1) {

if (this.isIEorOpera) {

// В случае Internet Explorer и Opera возвращаем на место // сохраненные обработчики событий или, если таковых нет, // просто их удаляем

pElement.onmouseover = (this.tips[elementlndex][3]) ? this . tips [elementlndex] [3] : null; pElement.onmouseout = (this.tips[elementlndex][4]) ? this, tips [elementlndex] [4] : null; }

else { //В случае Firefox удаляем функции-слушатели событий pElement.removeEventListener("mouseover", jspsPTShowPcpupTipFF, false); pElement.removeEventListener("mouseout", jspsPTHidePopupTipFF, false); } // Если текст подсказки был взят из свойства title, возвращаем // его снова в это свойство if (this.tips[elementlndex][5])

pElement.title = this.tips[elementlndex][5]; // Удаляем элемент массива tips, соответствующий данному элементу // страницы

delete this.tips[elementlndex]; this.tips.splice(elementlndex, 1); // Удаляем созданное ранее свойство ptObjectNumber pElement.removeAttribute("ptObjectNumber"); } }

// Функция, выводящая подсказку для Internet Explorer и Opera function jspsPTShowPopupTipIEandOpera() {

// Получаем экземпляр объекта PopupTip по его порядковому номеру var src = event.srcElement; var my = jsps_PT_list[src.ptObjectNumber];

// Получаем индекс элемента массива, где хранится текст подсказки // для данного элемента страницы

var elementlndex = jspsPTGetElementIndex(my, src); if (elementlndex > -1) { var el = my.tips[elementlndex];

// Вызываем сохраненный обработчик события onMouseOver if (el[3]) el[3] (); if (my.enabled) {

// Выводим подсказку на экран

my.popup.firstChild.nodeValue = el[l];

my.popupTipStyle.left = event.clientX +20;

// Располагаем всплывающую подсказку под элементом страницы.

// Свойства offsetTop и offsetHeight объекта,

// соответствующего элементу страницы, возвращают

// вертикальную координату верхнего левого угла // этого элемента страницы и его высоту соответственно my.popupTipStyle.top = src.offsetTop + src.offsetHeight; my.popupTipStyle.visibility = "visible"; } } }

// Функция, прячущая подсказку для Internet Explorer и Opera function jspsPTHidePopupTipIEandOpera() { // Получаем экземпляр объекта PopupTip по его порядковому номеру var src = event.srcElement; var my = jsps_PT_list[src.ptObjectNumber];

// Получаем индекс элемента массива, где хранится текст подсказки // для данного элемента страницы

var elementlndex = jspsPTGetElementlndex(my, src); if (elementlndex > -1) {

// Убираем подсказку с экрана my.popupTipStyle.visibility = "hidden"; var el = my.tips[elementlndex];

// Вызываем сохраненный обработчик события onMouseOut if (el[4]) el[4](); } }

// Функция, выводящая подсказку для Firefox function jspsPTShowPopupTipFF(event) {

// Получаем экземпляр объекта PopupTip по его порядковому номеру var src = event.target;

var my = jsps_PT_list[src.ptObjectNumber]; if (my.enabled) {

// Получаем индекс элемента массива, где хранится текст подсказк // для данного элемента страницы

var elementlndex = jspsPTGetElementlndexfmy, src); if (elementlndex > -1) {

// Выводим подсказку на экран

my.popup.firstChild.nodeValue = my.tips[elementlndex][1];

my.popupTipStyle.left = event.clientX +20;

// Располагаем всплывающую подсказку под элементом страницы. // Свойства offsetTop и offsetHeight объекта, // соответствующего элементу страницы, возвращают // вертикальную координату верхнего левого угла // этого элемента страницы и его высоту соответственно my.popupTipStyle.top = src.offsetTop + src.offsetHeight; my.popupTipStyle.visibility = "visible"; } } }

// Функция, прячущая подсказку для Firefox function jspsPTHidePopupTipFF(event) {

// Получаем экземпляр объекта PopupTip по его порядковому номеру

var src = event. target;

var my = jsps_PT_list[src.ptObjectNumber];

// Получаем индекс элемента массива, где хранится текст подсказки

// для данного элемента страницы

var elementlndex = jspsPTGetElementIndex(my, src);

if (elementlndex > -1)

// Убираем подсказку с экрана my.popupTipStyle.visibility = "hidden"; }

Внимание!

Объявление объекта PopupTip использует функцию jspsGetProgramlnfo, чье объявление приведено в листинге 3.1.

Хорошая идея!

Поместите объявление этого объекта в файл сценариев popuptip.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="popuptip.js"></SCRIPT>

Пример

Далее приведен HTML-код небольшой Web-страницы с тремя гиперссылками, при наведении курсора мыши на которые выводятся всплывающие подсказки.

<HTML> <HEAD>

<TITLE>Всплывающие подсказки</TITLE> <SCRIPT SRC="browserdetect.js"></SCRIPT>

<!-- Предполагается, что объявление функции jspsGetPrpgramInfo было помещено в файл сценариев browserdetect.js --> <SCRIPT SRC="popuptip.js"></SCRIPT>

<!-- Предполагается, что объявление объекта PopupTip бьшо помещено в файл сценариев popuptip.js --> </HEAD> <BODY>

<P><A ID="hrfl" HREF="pagel.html">Страница 1</A></P>

<P><A ID="hrf2" HREF="page2.html">Страница 2</A></P>

<P><A ID="hrf3" HREF="радеЗ.html" TITLE="На последнюю страницу">Страница 3</А></Р>

<SCRIPT TYPE="text/javascript">

var hrflObject = document.all["hrf1"]; var hrf20bject = document.all["hrf2"]; var hrf30bject = document.all["hrf3"]; var ptObject = new PopupTip(); ptObject.setTip(hrflObject, "На страницу 1"); ptObject.setTip(hrf20bject, "На страницу 2");

ptObject.setTip(hrf30bject); </SCRIPT> </BODY> </HTML>

Здесь для первых двух гиперссылок текст подсказок мы задаем явно, методом setTip объекта PopupTip. Текст подсказки для третьей гиперссылки будет автоматически взят из свойства title экземпляра объекта гиперссылки, благо мы задали его в атрибуте title тега <а> и при вызове метода setTip не указали его второй параметр.


« Пред. - След.

RLBN.ru - Электроника и компьютеры
0.1383
Hosted by uCoz