Помогите сделать красивое окошко подсказки!

[RaZoR2009 0]

Помогите сделать, или найти код, коасивого окошка подсказки!

Это вот чтото типа этого:

А то у меня просто текст!

Эта фишка появляеться после наведения на картинку в новости или просто на ссылку...

Помогите это сделать, походу нужен код КСС!

Помогите! :(

[n0lik 75]

Создайте новый файл со следующим содержанием:

window.onerror = null; var tooltip_attr_name = "tooltip";

// текст для ссылок с target="_blank"

var tooltip_blank_text = "(откроется в новом окне)";

/* укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность;

если хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки */

var tooltip_newline_entity = "  ";

/* максимальная ширина tooltip'а в пикселях; обнулите это

значение, если ширина должна быть нелимитирована */

var tooltip_max_width = "300"

window.onload = function(e) { if (document.createElement) tooltip.d(); }

tooltip = { t: document.createElement("DIV"), c: null, g: false, m: function(e) { if (tooltip.g) { oCanvas = document.getElementsByTagName( (document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY" )[0]; x = window.event ? event.clientX + oCanvas.scrollLeft : e.pageX; y = window.event ? event.clientY + oCanvas.scrollTop : e.pageY; tooltip.a(x, y); } }, d: function() {	tooltip.t.setAttribute("id", "tooltip");

document.body.appendChild(tooltip.t); a = document.all ? document.all : document.getElementsByTagName("*"); aLength = a.length; for (var i = 0; i < aLength; i++) { tooltip_title = a[i].getAttribute("title"); tooltip_alt = a[i].getAttribute("alt"); tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip_blank_text; if (tooltip_title || tooltip_blank) { a[i].setAttribute(tooltip_attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip_blank_text : tooltip_blank_text) : tooltip_title); if (a[i].getAttribute(tooltip_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_attr_name, tooltip_alt); if (a[i].getAttribute(tooltip_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_attr_name) && tooltip_blank) { } } document.onmousemove = tooltip.m; window.onscroll = tooltip.h; }, s: function(e) { d = window.event ? window.event.srcElement : e.currentTarget; if (!d.getAttribute(tooltip_attr_name)) return; if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild); tooltip.t.appendChild(document.createTextNode(d.getAttribute(tooltip_attr_name))

); r = d.getAttribute(tooltip_attr_name); tooltip.t.innerHTML = r.replace(tooltip_newline_entity, "<br />"); tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';", 1); tooltip.g = true; }, h: function(e) { tooltip.t.style.visibility = "hidden"; if (!tooltip_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); else if (o.attachEvent) o.attachEvent("on" + e, a); else return null; }, a: function(x, y) { oCanvas = document.getElementsByTagName( (document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY" )[0]; w_width = window.innerWidth ? window.innerWidth + window.pageXOffset : oCanvas.clientWidth + oCanvas.scrollLeft; w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : oCanvas.clientHeight + oCanvas.scrollTop; tooltip.t.style.width = "auto"; t_width = window.event ? tooltip.t.clientWidth : tooltip.t.offsetWidth; t_height = window.event ? tooltip.t.clientHeight : tooltip.t.offsetHeight; if (t_width > tooltip_max_width) { tooltip.t.style.width = tooltip_max_width + "px"; t_width = window.event ? tooltip.t.clientWidth : tooltip.t.offsetWidth; } t_extra_width = 7; t_extra_height = 5; tooltip.t.style.left = x + 8 + "px"; tooltip.t.style.top = y + 8 + "px"; while (x + t_width + t_extra_width > w_width) { --x; tooltip.t.style.left = x + "px"; t_width = window.event ? tooltip.t.clientWidth : tooltip.t.offsetWidth;	} while (y + t_height + t_extra_height > w_height) { --y;	tooltip.t.style.top = y + "px";	t_height = window.event ? tooltip.t.clientHeight : tooltip.t.offsetHeight; } } }[/codebox]

Далее сохраняем его как [b]tooltip.js[/b] и закидываем в папку /templates/ваш шаблон/[b]css[/b]/

Открываем фаил /templates/ваш шаблон/css/[b]stele.css[/b]

в самом низу добавляем:

[code]#tooltip { border-right:#999 1px solid; border-left: #999 5px solid; border-top:#999 1px solid; border-bottom:#999 1px solid; padding-bottom:4px; padding-right:5px; padding-left:5px; padding-top:3px; background:#eea; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); visibility:hidden; font:0.7em Verdana, Helvetica, sans-serif; position:absolute; text-align:justify; moz-opacity:.80; opacity:.80; }[/code]

(тут вы можете поэксперементировать с цветами, толщиной бордюра и т.д.) После чего сохраняем. Открываем /templates/ваш шаблон/[b]main.tpl[/b] находим тег [b]</head>[/b] и выше него вставляем:

[code]<script type="text/javascript" src="{THEME}/css/tooltip.js"></script>[/code]

Всё готово.

Теперь там где есть теги [b]title="подсказка"[/b] будет всплывающая подсказка + у ссылок где присутствует тег [b]target="_blank"[/b] к подсказке будет добавляться "откроется в новом окне"

Изменено 31 июля 2009 пользователем n0lik

[RaZoR2009 0]

Ага, теперь у меня вообще никаких подсказок нет, ни стандартной ни этой!

Посмотрите сами: http://www.warez-0k.ru

И еще, вот тут:

Открываем фаил /templates/ваш шаблон/css/stele.css

css/style.css

ОоО! Нет извените! Все работает отлично! Извените!

И вот еще, зайдите ктонить на мой сайт (http://www.warez-0k.ru) и напишите отображаеться это окошко подсказки на vozilla firefox ? А то у меня на mozilla и flock почему-то неотображаеться! =(

[celsoft 6 077]

Нелегальная копия скрипта http://forum.dle-news.ru/index.php?showtopic=47039