суббота, 30 августа 2014 г.

Всплывающая подсказка

В Дизайн - Добавить гаджет  - HTML / JavaScript  


<Стиль> #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 ("альтернативный текст").


С картинкой разобрались, теперь как прописать название для ссылки? Вставляете просто в конструкцию ссылки - атрибут название, выделенный красным цветом.  

 <HREF = "HTTP: // СТРАНИЦА КУДА ВЕДЕТ ССЫЛКА /"  название = "ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ" > Текст ссылки </>


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

Комментариев нет:

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