Испытав мимолетное подобие оргазма от осознания того факта, что не придется вручную дописывать к предыдущим ссылкам в блоге определенный класс с закрепленными стилями, что обычно бывает при создании собственной всплывающей подсказки на CSS, делюсь замечательной находкой с читателями.
Как я уже упомянул, данный скрипт автоматически выводит содержимое стандартного свойства title у ссылок во всем блоге в виде всего того безобразия, которое мы ему определим стилями. Это означает, что прописав скрипт один раз в шаблоне, можно не беспокоиться о некоей разнородности оформления постов. Помимо прочего при отсутствии аналогичной подписи у изображений он также автоматически отображает содержимое уже атрибута alt, прописанного к ним. И как дополнительное удобство, позволяет запретить показ всплывающего текста у тех определений, к которых он не требуется.
Действующий пример скрипта всплывающей подсказки вы можете подсмотреть у любой соответствующей ссылки в этом блоге, но дабы свести до минимума физическое усилие по перемещению указателя мыши со стороны читателя, сокращу путь, предложив взглянуть на пример совсем рядом:
Загадка:
Какое слово начинается с трех букв "Г" и заканчивается тремя буквами "Я"?
Отгадка.
Загадка:
Назовите слово с пятью буквами "Ы".
Отгадка.
Какое слово начинается с трех букв "Г" и заканчивается тремя буквами "Я"?
Отгадка.
Загадка:
Назовите слово с пятью буквами "Ы".
Отгадка.
Как разместить собственную всплывающую подсказку в блоге.
Добавление кода всплывающей подсказки в блог происходит в два этапа. Потребуется разместить в шаблоне стили CSS tooltip'а и непосредственно сам скрипт, отвечающий за привязку всплывающего блока к атрибутам tittle и alt блога.
Проследуйте Шаблон > Изменить HTML.
Скрипт следует размещать в шаблоне между тегами <head> и </head>. То есть, находите в поле редактирования шаблона строку </head> и прямо перед ней вносите следующий код:
<script language='javascript' type='text/javascript'>
var tooltip = {
/* настройки скрипта всплывающей подсказки */
options: {
attr_name: "tooltip", // название создаваемого атрибута всплывающей подсказки
blank_text: "{откроется в новом окне}", // текст для ссылок с target="_blank"
newline_entity: " ", // многострочность, при желании укажите символы, после которых будет происходить перевод строки
max_width: 0, // максимальная ширина баллона всплывающей подсказки в пикселях, укажите ноль, если желаете сделать ее резиновой
delay: 100, // задержка при показе tooltip'а в миллисекундах
skip_tags: ["link", "style"] // теги, у которых не обрабатываем атрибуты alt и title
},
/* окончание настроек */
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,"&");
s = s.replace(/\</g,"<");
s = s.replace(/\>/g,">");
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>
По умолчанию скрипт уже полностью настроен, однако у вас присутствует возможность задать собственные настройки, прописанные в начале скрипта, самостоятельно. Думаю, в комментариях к нему все изменяемые значения раскрыты достаточно подробно.Далее добавим стили к наименованию tooltip, который мы и определили в скрипте за всплывающую подсказку.
В шаблоне находим строку ]]></b:skin> и перед нею вписываем код:
#tooltip {
background:#98e3f2; /*цвет фона*/
color:#68211d; /*цвет текста*/
font-size:12px; /*размер шрифта*/
box-shadow:0 0 10px #68211d; /*тень блока всплывающей подсказки*/
-moz-box-shadow:0 0 10px #68211d;
-webkit-box-shadow:0 0 10px #68211d;
margin:0;
padding:10px; /*расстояние от текста до рамки*/
position:absolute;
visibility:hidden;
z-index:999999; /*преобладание подсказки над всеми остальными элементами*/
}
Здесь также все настраиваемые определения указаны в комментариях. Единственно, могу добавить, что для подбора цвета вы можете воспользоваться онлайн-генератор HTML-цветов. Во всем остальном вам понадобятся только прямые руки.Остается сохранить шаблон и полюбоваться оригинальной заменой стандартной всплывающей подсказки в блоге.