Можно ли изменить вид всплывающей подсказки?

sadhaka — Wed, 08 Dec 2010 15:23:52 GMT

Всплывающая подсказка, добавляемая к изображениям через параметр title тега , является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и ее настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых атрибута — position со значением absolute, он задает абсолютное позиционирование слоя, display со значением none скрывает слой и width задает ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 1).

Пример 1. Стиль для всплывающей подсказки

#floatTip {
 position: absolute; /* Абсолютное позиционирование */
 width: 250px; /* Ширина блока */
 display: none; /* Прячем от показа */
 border: 1px solid #000; /* Параметры рамки */
 padding: 4px; /* Поля вокруг текста */
 font-family: sans-serif; /* Рубленый шрифт */
 font-size: 9pt; /* Размер шрифта */
 color: #333; /* Цвет текста */
 background: #ffe5ff; /* Цвет фона */
}

Сам скрипт состоит из двух функций — moveTip отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip управляет видимостью слоя и выводит в нем желаемый текст (пример 2).

Пример 2. Скрипт для вывода слоя

document.onmousemove = moveTip;
function moveTip(e) {
 floatTipStyle = document.getElementById("floatTip").style;
 w = 250; // Ширина слоя

 // Для браузера IE
 if (document.all) { 
 x = event.x + document.body.scrollLeft; 
 y = event.y + document.body.scrollTop; 

 // Для остальных браузеров
 } else { 
 x = e.pageX; // Координата X курсора
 y = e.pageY; // Координата Y курсора
 }

 // Показывать слой справа от курсора 
 if ((x + w + 10) < document.body.clientWidth) { 
 floatTipStyle.left = x + 'px';

 // Показывать слой слева от курсора
 } else { 
 floatTipStyle.left = x - w + 'px';
 }
 // Положение от верхнего края окна браузера
 floatTipStyle.top = y + 20 + 'px';
}

function toolTip(msg) {
 floatTipStyle = document.getElementById("floatTip").style;
 if (msg) {

 // Выводим текст подсказки
 document.getElementById("floatTip").innerHTML = msg;
 floatTipStyle.display = "block"; // Показываем слой
 } else { 
 floatTipStyle.display = "none"; // Прячем слой
 } 
}

document.onmousemove = moveTip;
function moveTip(e) {
 floatTipStyle = document.getElementById("floatTip").style;
 w = 250; // Ширина слоя

 // Для браузера IE
 if (document.all) { 
 x = event.x + document.body.scrollLeft; 
 y = event.y + document.body.scrollTop; 

 // Для остальных браузеров
 } else { 
 x = e.pageX; // Координата X курсора
 y = e.pageY; // Координата Y курсора
 }

 // Показывать слой справа от курсора 
 if ((x + w + 10) < document.body.clientWidth) { 
 floatTipStyle.left = x + 'px';

 // Показывать слой слева от курсора
 } else { 
 floatTipStyle.left = x - w + 'px';
 }
 // Положение от верхнего края окна браузера
 floatTipStyle.top = y + 20 + 'px';
}

function toolTip(msg) {
 floatTipStyle = document.getElementById("floatTip").style;
 if (msg) {

 // Выводим текст подсказки
 document.getElementById("floatTip").innerHTML = msg;
 floatTipStyle.display = "block"; // Показываем слой
 } else { 
 floatTipStyle.display = "none"; // Прячем слой
 } 
}

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через параметр src тега Пример 3. Создание всплывающей подсказки

Этап последний - стили....

sadhaka — Sat, 21 Nov 2009 12:24:58 GMT

Слов нет - пошла ставить^^

Ну вот я здесь и обосновалась) гы)))

sadhaka — Tue, 15 Sep 2009 06:39:31 GMT

Дальше будет хуже))
Ууууу....
Все на сем фантазия закончилась)))

Sadhaka

Можно ли изменить вид всплывающей подсказки?

Этап последний - стили....

Ну вот я здесь и обосновалась) гы)))