Глобальный красибый tooltip на alt
Code (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;
-
}
-
}
-
}
Теперь необходимо настроить вид подсказки. CSS элемент tooltip в моём случае выглядит так:
Code (css)
-
-
#tooltip {
-
background:#FFFFFF;
-
border:2px solid #ADC1CE;
-
font:0.7em Verdana,Geneva,Arial,Helvetica,sans-serif;
-
margin:0px;
-
-moz-border-radius:8px;
-
padding:3px 5px;
-
position:absolute;
-
visibility:hidden
-
}
(Ещё не голосовали)
Загрузка...