Разделы

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

Всплывающая подсказка, добавляемая к изображениям через параметр 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. Скрипт для вывода слоя

<script type="text/javascript">
 document.onmousemove = moveTip;
 function  moveTip(e) {
  floatTipStyle = document.getattributeById("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.getattributeById("floatTip").style;
  if (msg) {
  // Выводим текст подсказки
    document.getattributeById("floatTip").innerHTML  = msg;
  //  Показываем слой
    floatTipStyle.display =  "block";
  } else { 
  // Прячем  слой
    floatTipStyle.display = "none";
  } 
 }
</script>

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

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

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

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Всплывающая подсказка, выводимая с помощью JavaScript

Гость, 13.12.2008

отлично! зашел бы сюда раньше не мучился бы так долго, спасибо!

ajita, 13.04.2010

А можно ли сделать, чтобы ширина подсказки определялась автоматически, исходя из ширины отображаемого текста?

McSim, 05.11.2010

Неплохой код.
тока я заменил
document.getAttributeById("floatTip").style
на
document.getElementById("floatTip").style;

и сразу все заработало :)

Разделы

Термины

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

Отправить комментарий