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


Пост (в основном) для пользователей:
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-->

Доска почета

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