Самая простая установка всплывающей подсказки для Блогспот, Блоггер


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

По заявкам читателей, публикую самую простую установку всплывающей подсказки, которую можно применять как к ссылкам, так и к изображениям. Изюминка заключается в самой простой инсталляции данного виджета, по сравнению с другими вариантами опубликованными в сети. Что бы не быть голословным, предлагаю убедится в том, как это работает. Наведите курсор на эту ссылку: Блогодел

Наведите курсор на картинку!



Если эффект вам понравился, приступаем к установке, которая осуществляется добавлением кода:

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



<style>#tooltip {opacity:0.8; border-radius: 9px;
background:#ffffff;   /*цвет фона*/
color:#191919;   /*цвет текста*/
font-size:16px;   /*размер шрифта*/
box-shadow:0 0 10px #191919;   /*тень блока всплывающей подсказки*/
-moz-box-shadow:0 0 10px #191919;
-webkit-box-shadow:0 0 10px #191919;
margin:0;
padding:10px;   /*расстояние от текста до рамки*/
position:absolute;
visibility:hidden;
z-index:999999;   /*преобладание подсказки над всеми остальными элементами*/
}</style><script language='javascript' type='text/javascript'>
var tooltip = {
    /* &#1053;&#1040;&#1063;&#1040;&#1051;&#1054; &#1053;&#1040;&#1057;&#1058;&#1056;&#1054;&#1045;&#1050; */
    options: {
        attr_name: "tooltip", // &#1085;&#1072;&#1080;&#1084;&#1077;&#1085;&#1086;&#1074;&#1072;&#1085;&#1080;&#1077; &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1077;&#1084;&#1086;&#1075;&#1086; tooltip'&#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; target="_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; tooltip'&#1072;&#1093; &#1084;&#1085;&#1086;&#1075;&#1086;&#1089;&#1090;&#1088;&#1086;&#1095;&#1085;&#1086;&#1089;&#1090;&#1100;; &#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; tooltip'&#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; &#1085;&#1077;&#1083;&#1080;&#1084;&#1080;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1072;
        delay: 100, // &#1079;&#1072;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1088;&#1080; &#1087;&#1086;&#1082;&#1072;&#1079;&#1077; tooltip'&#1072; &#1074; &#1084;&#1080;&#1083;&#1083;&#1080;&#1089;&#1077;&#1082;&#1091;&#1085;&#1076;&#1072;&#1093;
        skip_tags: ["link", "style"] // &#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; title
    },
    /* &#1050;&#1054;&#1053;&#1045;&#1062; &#1053;&#1040;&#1057;&#1058;&#1056;&#1054;&#1045;&#1050; */
    t: document.createElement("DIV"),
    c: null,
    g: false,
    canvas: null,
    m: function(e){
        if (tooltip.g){
            var x = window.event ? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : e.pageX;
            var y = window.event ? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop) : e.pageY;
            tooltip.a(x, y);
        }
    },
    d: function(){
        tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0];
        tooltip.t.setAttribute("id", "tooltip");
        document.body.appendChild(tooltip.t);
        if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie
        var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error
        var l = a.length;
        for (var i = 0; i < l; i++){
            if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue;
            var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so...
            if (tooltip_title && typeof tooltip_title != "string") tooltip_title = "";
            var tooltip_alt = a[i].getAttribute("alt");
            var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip.options.blank_text;
            if (tooltip_title || tooltip_blank){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("title");
                    if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }else if (tooltip_alt && a[i].complete){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_alt);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }
            if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){
                //
            }
        }
        document.onmousemove = tooltip.m;
        window.onscroll = tooltip.h;
        tooltip.a(-99, -99);
    },
 
    _: function(s){
        s = s.replace(/&/g,"&amp;");
        s = s.replace(/</g,"&lt;");
        s = s.replace(/>/g,"&gt;");
        return s;
    },
    s: function(e){
        if (typeof tooltip == "undefined") return;
        var d = window.event ? window.event.srcElement : e.target;
        if (!d.getAttribute(tooltip.options.attr_name)) return;
        var s = d.getAttribute(tooltip.options.attr_name);
        if (tooltip.options.newline_entity){
            var s = tooltip._(s);
            s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "<br />");
            tooltip.t.innerHTML = s;
        }else{
            if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
            tooltip.t.appendChild(document.createTextNode(s));
        }
        tooltip.c = setTimeout(function(){
            tooltip.t.style.visibility = 'visible';
        }, tooltip.options.delay);
        tooltip.g = true;
    },
    h: function(e){
        if (typeof tooltip == "undefined") return;
        tooltip.t.style.visibility = "hidden";
        if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
        clearTimeout(tooltip.c);
        tooltip.g = false;
        tooltip.a(-99, -99);
    },
    l: function(o, e, a){
        if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround!
        else if (o.attachEvent) o.attachEvent("on" + e, a);
            else return null;
    },
    a: function(x, y){
        var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : window.innerWidth + window.pageXOffset;
        var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // should be vice verca since Opera 7 is crazy!
        if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto";
     
        var t_width = tooltip.t.offsetWidth;
        var t_height = tooltip.t.offsetHeight;
        tooltip.t.style.left = x + 8 + "px";
        tooltip.t.style.top = y + 8 + "px";
     
        if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px";
        if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px";
    }
}
Array.prototype.in_array = function(value){
    var l = this.length;
    for (var i = 0; i < l; i++)
        if (this[i] === value) return true;
    return false;
};
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", tooltip.d, false);
    else if (root.attachEvent) root.attachEvent("onload", tooltip.d);
}
</script> 


После внедрения кода на ваш блог, предстоит еще один незначительный шаг, а именно прописать атрибут title (в котором будет текст всплывающей подсказки) или к картинке или к ссылке.
Разберемся вначале с картинкой. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер-....-Добавить подпись-Свойства-Удалить". Надо выбрать "Свойства" и заполнить поле (с текстом для подсказки) для title ("текст заголовка") и можете (по желанию) заполнить alt ("альтернативный текст").


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

 < a href="http://СТРАНИЦА КУДА ВЕДЕТ ССЫЛКА/" title="ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ">Текст ссылки< /a>


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


Код без target="_blank

<style>#tooltip {opacity:0.8; border-radius: 9px;
background:#ffffff;   /*цвет фона*/
color:#191919;   /*цвет текста*/
font-size:16px;   /*размер шрифта*/
box-shadow:0 0 10px #191919;   /*тень блока всплывающей подсказки*/
-moz-box-shadow:0 0 10px #191919;
-webkit-box-shadow:0 0 10px #191919;
margin:0;
padding:10px;   /*расстояние от текста до рамки*/
position:absolute;
visibility:hidden;
z-index:999999;   /*преобладание подсказки над всеми остальными элементами*/
}</style><!--Tooltip--> <script language='javascript' type='text/javascript'>
var tooltip = {
    /* &#1053;&#1040;&#1063;&#1040;&#1051;&#1054; &#1053;&#1040;&#1057;&#1058;&#1056;&#1054;&#1045;&#1050; */
    options: {
        attr_name: "tooltip", // &#1085;&#1072;&#1080;&#1084;&#1077;&#1085;&#1086;&#1074;&#1072;&#1085;&#1080;&#1077; &#1089;&#1086;&#1079;&#1076;&#1072;&#1074;&#1072;&#1077;&#1084;&#1086;&#1075;&#1086; tooltip'&#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; target="_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; tooltip'&#1072;&#1093; &#1084;&#1085;&#1086;&#1075;&#1086;&#1089;&#1090;&#1088;&#1086;&#1095;&#1085;&#1086;&#1089;&#1090;&#1100;; &#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; tooltip'&#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; &#1085;&#1077;&#1083;&#1080;&#1084;&#1080;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1072;
        delay: 100, // &#1079;&#1072;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1088;&#1080; &#1087;&#1086;&#1082;&#1072;&#1079;&#1077; tooltip'&#1072; &#1074; &#1084;&#1080;&#1083;&#1083;&#1080;&#1089;&#1077;&#1082;&#1091;&#1085;&#1076;&#1072;&#1093;
        skip_tags: ["link", "style"] // &#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; title
    },
    /* &#1050;&#1054;&#1053;&#1045;&#1062; &#1053;&#1040;&#1057;&#1058;&#1056;&#1054;&#1045;&#1050; */
    t: document.createElement("DIV"),
    c: null,
    g: false,
    canvas: null,
    m: function(e){
        if (tooltip.g){
            var x = window.event ? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : e.pageX;
            var y = window.event ? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop) : e.pageY;
            tooltip.a(x, y);
        }
    },
    d: function(){
        tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0];
        tooltip.t.setAttribute("id", "tooltip");
        document.body.appendChild(tooltip.t);
        if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie
        var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error
        var l = a.length;
        for (var i = 0; i < l; i++){
            if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue;
            var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so...
            if (tooltip_title && typeof tooltip_title != "string") tooltip_title = "";
            var tooltip_alt = a[i].getAttribute("alt");
            var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("targe") == "_blank" && tooltip.options.blank_text;
            if (tooltip_title || tooltip_blank){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("title");
                    if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }else if (tooltip_alt && a[i].complete){
                a[i].setAttribute(tooltip.options.attr_name, tooltip_alt);
                if (a[i].getAttribute(tooltip.options.attr_name)){
                    a[i].removeAttribute("alt");
                    tooltip.l(a[i], "mouseover", tooltip.s);
                    tooltip.l(a[i], "mouseout", tooltip.h);
                }
            }
            if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){
                //
            }
        }
        document.onmousemove = tooltip.m;
        window.onscroll = tooltip.h;
        tooltip.a(-99, -99);
    },
 
    _: function(s){
        s = s.replace(/&/g,"&amp;");
        s = s.replace(/</g,"&lt;");
        s = s.replace(/>/g,"&gt;");
        return s;
    },
    s: function(e){
        if (typeof tooltip == "undefined") return;
        var d = window.event ? window.event.srcElement : e.target;
        if (!d.getAttribute(tooltip.options.attr_name)) return;
        var s = d.getAttribute(tooltip.options.attr_name);
        if (tooltip.options.newline_entity){
            var s = tooltip._(s);
            s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "<br />");
            tooltip.t.innerHTML = s;
        }else{
            if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
            tooltip.t.appendChild(document.createTextNode(s));
        }
        tooltip.c = setTimeout(function(){
            tooltip.t.style.visibility = 'visible';
        }, tooltip.options.delay);
        tooltip.g = true;
    },
    h: function(e){
        if (typeof tooltip == "undefined") return;
        tooltip.t.style.visibility = "hidden";
        if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
        clearTimeout(tooltip.c);
        tooltip.g = false;
        tooltip.a(-99, -99);
    },
    l: function(o, e, a){
        if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround!
        else if (o.attachEvent) o.attachEvent("on" + e, a);
            else return null;
    },
    a: function(x, y){
        var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : window.innerWidth + window.pageXOffset;
        var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // should be vice verca since Opera 7 is crazy!
        if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto";
     
        var t_width = tooltip.t.offsetWidth;
        var t_height = tooltip.t.offsetHeight;
        tooltip.t.style.left = x + 8 + "px";
        tooltip.t.style.top = y + 8 + "px";
     
        if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px";
        if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px";
    }
}
Array.prototype.in_array = function(value){
    var l = this.length;
    for (var i = 0; i < l; i++)
        if (this[i] === value) return true;
    return false;
};
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", tooltip.d, false);
    else if (root.attachEvent) root.attachEvent("onload", tooltip.d);
}
</script> <!--End Tooltip-->

24 коммент.:

Максим Волченко
Бажул Алена
Максим Волченко
Justus
Максим Волченко
Максим Волченко
Justus
Justus
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Justus
Максим Волченко
Павел
Анонимный
Justus
Анонимный
Justus
Наталья Черникова
Вячеслав Соколов
lesya kinoman
Justus
Леонид Романов

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

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!