<style type="text/css">
#tooltip {
background:#FFFFFF;
border:2px solid #ADC1CE;
font:1.7em Verdana,Geneva,Arial,Helvetica,sans-serif;
margin:0px;
-moz-border-radius:8px;
padding:3px 5px;
position:absolute;
visibility:hidden
}
</style>
<h1>Красивая глобальная кроссбраузерная вплывающая подсказка на ALT</h1>
<br>
<p><a href="http://kdg.htmlweb.ru/" title='Это моя домашняя страница'>Это ссылка</a>
<script language="JavaScript">
// отключение вывода сообщений об ошибках
window.onerror = null;
var tooltip_attr_name = "tooltip"; // наименование создаваемого tooltip'ого атрибута
// функция вызывается при загрузке страницы
window.onload = function(e){
// если браузер поддерживает DOM и создание элементов, то мы запускаем механизм создания tooltip'а
if (document.createElement) tooltip.d();
}
// объект tooltip
tooltip = {
// создание слоя, в котором будет находится текст подсказки (точнее, TextNode, содержащий текст)
t: document.createElement("DIV"),
// таймер
c: null,
// флаг, указывающий показана ли сейчас на экране подсказка
g: false,
// обработчик события onMouseMove
m: function(e){
// если подсказка была вызвана на экран
if (tooltip.g){
// важно! определяем канву, учитывая режим совместимости в IE 6
oCanvas = document.getElementsByTagName(
(document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY"
)[0];
// x-координата, где произошёл вызов подсказки
x = window.event ? event.clientX + oCanvas.scrollLeft : e.pageX;
// y-координата, где произошёл вызов подсказки
y = window.event ? event.clientY + oCanvas.scrollTop : e.pageY;
// вывод подсказки на экран (задание координат)
tooltip.a(x, y);
}
},
d: function(){
// установка атрибута id со значением tooltip (который описан у нас в CSS)
tooltip.t.setAttribute("id", "tooltip");
// добавление к элементу body дочернего объекта tooltip
document.body.appendChild(tooltip.t);
/* далее мы считываем в массив все элементы, затем у тех, которые имеют HTML атрибуты title и alt задаём новый атрибут tooltip_attr_name (текст подсказки); мы также задаём обработчики событий onMouseOver и onMouseOut */
a = (document.all) ? document.all : document.getElementsByTagName("*");
aLength = a.length;
for (var i = 0; i < aLength; i++){
if (a[i].getAttribute("title")){
a[i].setAttribute(tooltip_attr_name, a[i].getAttribute("title"));
a[i].removeAttribute("title");
if (a[i].getAttribute("alt") && a[i].complete) a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}else
if (a[i].getAttribute("alt") && a[i].complete){
a[i].setAttribute(tooltip_attr_name, a[i].getAttribute("alt"));
a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}
}
// задаём для документа обработчик события onMouseMove
document.onmousemove = tooltip.m;
// прячем подсказку при скроллинге
window.onscroll = tooltip.h;
},
// подготавливаем подсказку для вывода на экран
s: function(e){
// получаем объект, у которого будет показана подсказка
d = (window.event) ? window.event.srcElement : e.currentTarget;
// нелишняя проверка на наличее свойства tooltip_attr_name
if (!d.getAttribute(tooltip_attr_name)) return;
// удаляем у слоя с подсказкой первый дочерний объект (TextNode с текстом), если он вдуг не удалился раньше
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
/* добавляем к элементу t (слой) новый TextNode, содержащий текст, взятый из свойства tooltip_attr_name активного объекта */
tooltip.t.appendChild(document.createTextNode(d.getAttribute(tooltip_attr_name)));
// показываем подсказку с задержкой в 0,5 секунды
tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';", 500);
// устанавливаем флаг, сигнализирующий о том, что подсказка у нас на экране
tooltip.g = true;
},
// удаляем подсказку с экрана
h: function(e){
// прячем подсказку
tooltip.t.style.visibility = "hidden";
// удаляем у слоя с подсказкой первый дочерний объект (TextNode с текстом)
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
// убираем задержку
clearTimeout(tooltip.c);
// устанавливаем флаг
tooltip.g = false;
// с глаз долой:
tooltip.a(-99, -99);
},
// делаем так, чтобы элементы с title и alt нужным образом реагировали на события onMouseOver и onMouseOut
l: function(o, e, a){
if (o.addEventListener) o.addEventListener(e, a, false); // было true (не работает в Opera 7)
else if (o.attachEvent) o.attachEvent("on" + e, a);
else return null;
},
// устанавливаем координаты всплывающей подсказки
a: function(x, y){
// важно! определяем канву, учитывая режим совместимости в IE 6
oCanvas = document.getElementsByTagName(
(document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY"
)[0];
w_width = window.event ? oCanvas.clientWidth : window.innerWidth;
t_width = window.event ? tooltip.t.clientWidth : tooltip.t.innerWidth;
t_extra_width = 7; // padding + borderWidth;
// y-координата
tooltip.t.style.top = y + 8 + "px";
// x-координата
tooltip.t.style.left = x + 8 + "px";
// bugfix! делаем так, чтобы подсказка не вылазила за границы окна
while (x + t_width + t_extra_width > w_width){
-x;
tooltip.t.style.left = x + "px";
t_width = window.event ? tooltip.t.clientWidth : tooltip.t.innerWidth;
}
}
}
</script>
Скопировать в буфер
© Copyright 2008-2012 by KDG