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

🕛 19.01.2009, 18:43
Всплывающая подсказка, добавляемая к изображениям через параметр title тега <IMG>, является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и ее настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью 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"; } 
}Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через параметр src тега <script>. Окончательный код показан в примере 3.

Пример 3. Создание всплывающей подсказки

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Всплывающая подсказка</title> <style type="text/css"> #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 4px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ffe5ff; } </style> <script type="text/javascript" src="tooltip.js"></script> </head> <body> <p><img src="girl.jpg" alt="Фотография" onMouseOver="toolTip('Фотоаппарат: Canon EOS 350D<br>Объектив: Canon EF 24-105 f/4L IS USM<br>Вспышка: Canon Speedlite 580 EX<br>Выдержка: 1/125<br>Диафрагма: 5.6')" onMouseOut="toolTip()"></p> <div id="floatTip"></div> </body>
</html>