<Стиль> #tooltip {непрозрачность: 0,8; граница радиуса: 9px;
фон: # FFFFFF; / * Цвет фона * /
цвет: # 191919; / * Цвет текста * /
размер шрифта: 16px; / * Размер шрифта * /
коробки-тени: 0 0 10px # 191919; / * Тень блока всплывающей подсказки * /
-moz-коробка-тени: 0 0 10px # 191919;
-webkit-коробка-тени: 0 0 10px # 191919;
маржа: 0;
обивка: 10px; / * Расстояние от текста до рамки * /
позицию: абсолютная;
видимость: скрытый;
г-индекс: 999999; / * Преобладание подсказки над всеми остальными элементами * /
} </ стиль> <скриптовый язык = 'JavaScript' Тип = 'текст / JavaScript ">
вар подсказка = {
/ * & # 1053; & # 1040; & # 1063; & # 1040; & # 1051; & # 1054; & # 1053; & # 1040; & # 1057; & # 1058; & # 1056; & # 1054; & # 1045; & # 1050; * /
Варианты: {
attr_name: "Подсказка", // & # 1085; & # 1072; & # 1080; & # 1084; & # 1077; & # 1085; & # 1086; & # 1074; & # 1072; & # 1085; & # 1080; & # 1077; & # 1089; & # 1086; & # 1079; & # 1076; & # 1072; & # 1074; & # 1072; & # 1077; & # 1084; & # 1086; & # 1075; & # 1086; подсказка '& # 1086; & # 1075; & # 1086; & # 1072; & # 1090; & # 1088; & # 1080; & # 1073; & # 1091; & # 1090; & # 1072;
blank_text: "{откроется в новом окне}", // & # 1090; & # 1077; & # 1082; & # 1089; & # 1090; & # 1076; & # 1083; & # 1103; & # 1089; & # 1089; & # 1099; & # 1083; & # 1086; & # 1082; & # 1089; целевых = "_blank"
newline_entity: "", // & # 1091; & # 1082; & # 1072; & # 1078; & # 1080; & # 1090; & # 1077; & # 1087; & # 1091; & # 1089; & # 1090; & # 1091; & # 1102; & # 1089; & # 1090; & # 1088; & # 1086; & # 1082; & # 1091; (""), И # 1077; & # 1089; & # 1083; & # 1080; & # 1085; & # 1077; & # 1093; & # 1086; & # 1090; & # 1080; & # 1090; & # 1077; & # 1080; & # 1089; & # 1087; & # 1086; & # 1083; & # 1100; & # 1079; & # 1086; & # 1074; & # 1072; & # 1090; & # 1100; & # 1074; подсказка '& # 1072; & # 1093; & # 1077; & # 1078; & # 1077; & # 1083; & # 1080; & # 1093; & # 1086; & # 1090; & # 1080; & # 1090; & # 1077 ;, & # 1090; & # 1086; & # 1091; & # 1082; & # 1072; & # 1078; & # 1080; & # 1090; & # 1077; & # 1090; & # 1086; & # 1090; & # 1089; & # 1080; & # 1084; & # 1074; & # 1086; & # 1083; & # 1080; & # 1083; & # 1080; & # 1089; & # 1080; & # 1084; & # 1074; & # 1086; & # 1083; & # 1099 ;, & # 1082; & # 1086; & # 1090; & # 1086; & # 1088; & # 1099; & # 1077; & # 1073; & # 1091; & # 1076; & # 1091; & # 1090; & # 1079; & # 1072; & # 1084; & # 1077; & # 1085; & # 1103; & # 1090; & # 1100; & # 1089; & # 1103; & # 1085; & # 1072; & # 1087; & # 1077; & # 1088; & # 1077; & # 1074; & # 1086; & # 1076; & # 1089; & # 1090; & # 1088; & # 1086; & # 1082; & # 1080;
max_width: 250, // & # 1084; & # 1072; & # 1082; & # 1089; & # 1080; & # 1084; & # 1072; & # 1083; & # 1100; & # 1085; & # 1072; & # 1103; & # 1096; & # 1080; & # 1088; & # 1080; & # 1085; & # 1072; подсказка '& # 1072; & # 1074; & # 1087; & # 1080; & # 1082; & # 1089; & # 1077; & # 1083; & # 1072; & # 1093 ;; & # 1086; & # 1073; & # 1085; & # 1091; & # 1083; & # 1080; & # 1090; & # 1077; & # 1101; & # 1090; & # 1086; & # 1079; & # 1085; & # 1072; & # 1095; & # 1077; & # 1085; & # 1080; & # 1077 ;, & # 1077; & # 1089; & # 1083; & # 1080; & # 1096; & # 1080; & # 1088; & # 1080; & # 1085; & # 1072; & # 1076; & # 1086; & # 1083; & # 1078; & # 1085; & # 1072; & # 1073; & # 1099; & # 1090; & # 1100;
100, // & # 1079; & # 1072; & # 1076; & # 1077; & # 1088; & # 1078; & # 1082; & # 1072; & # 1087; & # 1088; & # 1080; & # 1087; & # 1086; & # 1082; & # 1072; & # 1079; & # 1077; подсказка '& # 1072; & # 1074;
["Ссылка", "стиль"] // & # 1090; & # 1077; & # 1075; & # 1080 ;, & # 1091; & # 1082; & # 1086; & # 1090; & # 1086; & # 1088; & # 1099; & # 1093; & # 1085; & # 1077; & # 1086; & # 1073; & # 1088; & # 1072; & # 1073; & # 1072; & # 1090; & # 1099; & # 1074; & # 1072; & # 1077; & # 1084; & # 1072; & # 1090; & # 1088; & # 1080; & # 1073; & # 1091; & # 1090; & # 1099; Alt & # 1080; Название
},
/ * & # 1050; & # 1054; & # 1053; & # 1045; & # 1062; & # 1053; & # 1040; & # 1057; & # 1058; & # 1056; & # 1054; & # 1045; & # 1050; * /
т: document.createElement ("ДИВ"),
с: нулевые,
г: ложные,
холст: нуль,
м: функция (е) {
если (tooltip.g) {
вар х = window.event? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft): e.pageX;
вар у = window.event? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop): e.pageY;
tooltip.a (х, у);
}
},
г: функция () {
tooltip.canvas = document.getElementsByTagName (документ .compatMode && document.compatMode == "CSS1Compat" "HTML"?: "тело") [0];
tooltip.t.setAttribute ("ID", "подсказки");
document.body.appendChild (tooltip.t);
если (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "PX"; // Все, но есть
вар = document.all &&! window.opera? document.all: document.getElementsByTagName ("*"); // В опере 9 document.all производит несоответствие типов ошибок
вар L = a.length;
для (вар = 0; г <л; я ++) {
если ([я] || tooltip.options.skip_tags.in_array (! [я] .tagName.toLowerCase ())) по-прежнему;
вар tooltip_title = [я] .getAttribute ("название"); // Возвращается образуют объект, если IE & имя = "Название"; то IE падает; так ...
если (tooltip_title && TypeOf tooltip_title = "строка"!) tooltip_title = "";
вар tooltip_alt = [я] .getAttribute ("Alt");
вар tooltip_blank = [я] .getAttribute («мишень») && [я] .getAttribute («мишень») == "_blank" && tooltip.options.blank_text;
если (tooltip_title || tooltip_blank) {
? [я] .setAttribute (tooltip.options.attr_name, tooltip_blank (tooltip_title? tooltip_title + "" + tooltip.options.blank_text: tooltip.options.blank_text): tooltip_title);
если ([я] .getAttribute (tooltip.options.attr_name)) {
[я] .removeAttribute ("название");
если (tooltip_alt && [я] .complete) [я] .removeAttribute ("Alt");
tooltip.l ([я], "Наведите курсор мыши на", tooltip.s);
tooltip.l ([я], "MouseOut", tooltip.h);
}
} остальное, если (tooltip_alt && [я] .complete) {
[я] .setAttribute (tooltip.options.attr_name, tooltip_alt);
если ([я] .getAttribute (подсказка .options.attr_name)) {
[я] .removeAttribute ("Alt");
tooltip.l ([я], "Наведите курсор мыши на", tooltip.s);
tooltip.l ([я], "MouseOut", tooltip.h);
}
}
если && tooltip_blank) {([я] .getAttribute (tooltip.options.attr_name!)
//
}
}
document.onmousemove = tooltip.m;
window.onscroll = tooltip.h;
tooltip.a (-99, -99);
}, _ функция (ы) { S = s.replace (/ и / г ", и усилитель;"); S = s.replace (/ </ г ", и л;") ; ы = s.replace (/> / г, "& GT;"); возвращение с; }, S: функция (е) { если (TypeOf подсказка == "не определено") возвращение; вар д = window.event? window.event.srcElement:; e.target (! d.getAttribute (tooltip.options.attr_name)) если возвращение; вар ы = d.getAttribute (tooltip.options.attr_name); если (tooltip.options.newline_entity) { вар с = подсказка ._ (ы); сек = s.replace (Eval ("/" + подсказка ._ (tooltip.options.newline_entity) + "/ г"), "<br />"); tooltip.t. InnerHTML = с; } еще { если (tooltip.t.firstChild) = SetTimeout (функция () { tooltip.t.style.visibility = 'видна'; }, tooltip.options.delay); tooltip.g = верно; }, ч: функция (е) { если (TypeOf подсказка == " не определено ") возвращение; tooltip.t.style.visibility = "скрытые"; если (tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild (tooltip.t.firstChild);! clearTimeout (tooltip.c ); tooltip.g = ложь; tooltip.a (-99, -99); }, л: функция (о, е,) { если (o.addEventListener) o.addEventListener (е, а, ложно); // Правда - Opera 7b обходной путь! остальное, если (o.attachEvent) o.attachEvent ("на" + е, а); еще возвращение NULL; }, : функция (х, у) { вар w_width = подсказка. canvas.clientWidth? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft): window.innerWidth + window.pageXOffset; вар w_height = window.innerHeight? window.innerHeight + window.pageYOffset: tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // Должен быть вице-verca с Opera 7 сумасшедший! если (document.all && document.all.item &&! window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth> Подсказка .options.max_width? tooltip.options.max_width + "PX": "авто"; вар t_width = tooltip.t.offsetWidth; вар t_height = tooltip.t.offsetHeight; tooltip.t.style.left = х + 8 + "PX"; подсказка. t.style.top = у + 8 + "PX"; если (х + t_width> w_width) tooltip.t.style.left = w_width - t_width + "PX"; если (у + t_height> w_height) tooltip.t. style.top = w_height - t_height + "PX"; } } Array.prototype.in_array = функция (значение) { вар л = this.length; для (вар = 0; г <л; я ++) , если (это [я ] === значение) возвращение истинного; возвращение ложным; }; вар корневой = window.addEventListener || window.attachEvent? окно: document.addEventListener? Документ: нуль; если (корень) { если (root.addEventListener) root.addEventListener ("нагрузка", tooltip.d, ложно); остальное, если (root.attachEvent) root.attachEvent ("OnLoad", tooltip.d); } </ скрипт>
После внедрения кода на ваш блог, предстоит еще один незначительный шаг, а именно прописать атрибут название (в котором будет текст всплывающей подсказки) или к картинке или к ссылке.
Разберемся вначале с картинкой. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер -....- Добавить подпись-Свойства-Удалить". Надо выбрать "Свойства" и заполнить поле (с текстом для подсказки) для названия ("текст заголовка") и можете (по желанию) заполнить Alt ("альтернативный текст").
Разберемся вначале с картинкой. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер -....- Добавить подпись-Свойства-Удалить". Надо выбрать "Свойства" и заполнить поле (с текстом для подсказки) для названия ("текст заголовка") и можете (по желанию) заполнить Alt ("альтернативный текст").
С картинкой разобрались, теперь как прописать название для ссылки? Вставляете просто в конструкцию ссылки - атрибут название, выделенный красным цветом.
<HREF = "HTTP: // СТРАНИЦА КУДА ВЕДЕТ ССЫЛКА /" название = "ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ" > Текст ссылки </>
Если у вас все получилось, то поздравляю с новым усовершенствованием вашего блога!
Комментариев нет:
Отправить комментарий