Поиск [ищу]всплывающее окошко

Kingi · 9 Мар 2008

Здравствуйте. Как сделать всплывающее окошко, что бы когда наводишь на ссылку, показывалось маленькое окошко. Пример colorworld.org
Если такое было то не баньте, я просто не нашел похожей темы.

Kaimi · 9 Мар 2008

Если не найдешь готовое решение - попробуй переделать под себя скрипт
Для просмотра ссылки Войди или Зарегистрируйся

Я его как то раз использовал для создания всплывающего окошка с фотографией.

E-body · 9 Мар 2008

Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием title="opisanie blablabla"

Не будет работать если:

<a href="http://nulled.ws">nulled.ws</a>

Появится при наведении курсора Nulled Warez Scripts

<a title="Nulled Warez Scripts" href="http://nulled.ws">nulled.ws</a>

1 - Создаем файл mw_hint.js и кидаем его в templates/your_skin/css/
2 - В файл mw_hint.js вставляем этот код:

PHP:

function MW_System_Load(){
this.wib = screen.width;
this.heb = screen.height;
this.documes = (document.getElementById || document.createElement || document.getElementsByTagName) ? true : false;
this.objects = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
this.types = 'load';
}
MW_System_Load.prototype.addsevent = function(func){
if(this.objects.addEventListener){
this.objects.addEventListener(this.types,func,false);
return true;
} else if (this.objects.attachEvent){
this.objects.attachEvent("on" + this.types,func);
} else {
return false;
}
}
MW_System_Load.prototype.browser = function(){
this.ver = navigator.appVersion;
this.agent = navigator.userAgent.toLowerCase();
this.dom = document.getElementById ? 1:0;
this.all = document.all ? 1:0;
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom) ? 1:0;
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom) ? 1:0;
this.ie4 = (document.all && !this.dom) ? 1:0;
this.ie = this.ie4 || this.ie5 || this.ie6;
this.opera = this.agent.indexOf("opera")>-1;
this.gecko = (this.agent.indexOf("gecko")!=-1) ? 1:0;
this.bw = (this.ie || this.opera || this.gecko);
return this;
}
MW_System_Load.prototype.findobj = function(obj){
this.parent = window.document;
if(this.parent[obj]){ return this.parent[obj]; }
if(this.parent.all && this.parent.all[obj]){ return this.parent.all[obj]; }
if(this.parent.layers && this.parent.layers[obj]){ return this.parent.layers[obj]; }
if(this.parent.getElementById && this.parent.getElementById(obj)){ return this.parent.getElementById(obj); }
return null;
}
var MW = new MW_System_Load();
function MW_System_Hint(){}
MW_System_Hint.prototype.show = function(obj,str){
var hint = MW.findobj('hint');
if(!obj){ return; }
if(!MW.documes){ return; }
if(!hint){ return; }
hint.className = 'hint';
hint.style.left = 15;
hint.style.top = 50;

obj.onmouseout = function(advance){
hint.style.width = '';
hint.style.visibility = 'hidden';
if(hint.firstChild) hint.removeChild(hint.firstChild);
hint.appendChild(document.createTextNode(str));
};
obj.onmousemove = function(advance){
//str = str.replace(/");
hint.style.width = '';
hint.innerHTML = str;
vc = document.getElementsByTagName((document.compatMode && document.compatMode=="CSS1Compat") ? "HTML":"BODY")[0];
x = window.event ? event.clientX + vc.scrollLeft : advance.pageX;
y = window.event ? event.clientY + vc.scrollTop : advance.pageY;
vcwidth = vc.clientWidth ? vc.clientWidth + vc.scrollLeft : window.innerWidth + window.pageXOffset;
vcheight = vc.innerHeight ? window.innerHeight + window.pageYOffset : vc.clientHeight + vc.scrollTop;
if(hint.offsetWidth>500){ hint.style.width = '200'; }
if((x + hint.offsetWidth + 15) > vcwidth){
hint.style.left = x - hint.offsetWidth - 4;
} else {
hint.style.left = x + 15;
}
if((y + hint.offsetHeight + 19) > vcheight){
hint.style.top = y - hint.offsetHeight;
} else {
hint.style.top = y + 25;
}
//if(typeof(hint.style.MozOpacity)!="undefined"){
hint.style.opacity = '.91';
hint.style.filter = "alpha(opacity:91)";
//}
hint.style.visibility = 'visible';
};
}
MW_System_Hint.prototype.initialize = function(){
var hint = document.createElement("DIV");
hint.setAttribute('id','hint');
document.getElementsByTagName('body')[0].appendChild(hint);
hint.style.visibility = 'hidden';
var hintmarker = ['a','img'];
var textmarker = ['title','alt'];
var lenmarker = hintmarker.length;
for(var i=0; iatr = document.getElementsByTagName(hintmarker);
for(var j=0; jif(viewhint=atr[j].getAttribute(textmarker[i])){
atr[j].removeAttribute(textmarker[i]);
HINT.show(atr[j],viewhint);
}
}
}
var HINT = new MW_System_Hint();
if(MW.objects){ MW.addsevent(HINT.initialize); }

3 - в main.tpl вашего шаблона вставляем перед

PHP:

</style>

Вот эти настройки css

PHP:

.hint
{
background-color:#336699;
line-height:10px;
color:white;
font-family:verdana;
font-size:11px;
width:auto;
border-top:1px solid white;
border-right:1px solid white;
border-bottom:1px solid white;
border-left:5px solid orange;
margin:0px; 
padding:8px; 
position:absolute; 
visibility:hidden;
}

Немножко о настройках хинта.
color: - само собой цвет текста.
background-color: - цвет фона.
font-family: - шрифт.
font-size: - размер шрифта.
width: - ширина. по умолчанию (auto) если хотите можете изменить. но она тогда будет фиксированная.

4 - Далее в main.tpl после строки:

PHP:

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">

Вставляем вот эту строку:
<script type="text/javascript" src="{THEME}/css/mw_hint.js"></script>

Kingi · 9 Мар 2008

Все сделал как написал,но просто титл отображаеться(без окошка).Для просмотра ссылки Войди или Зарегистрируйся. Изменил первые ссылки в меню(главная и форум)

Сделал по другому:
в main.tpl вставил код:

Код:

<script type="text/javascript" src="/templates/GBv7_design/tooltip.js"><style>
#tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
}
</style>

И создал tooltip.js

Код:

var tooltip = {

	/* НАЧАЛО НАСТРОЕК */
	options: {
		attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
		blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"
		newline_entity: "  ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
		max_width: 0, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
		delay: 500, // задержка при показе 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 : e.pageX;
			var y = window.event ? event.clientY + tooltip.canvas.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("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 : window.innerWidth + window.pageXOffset;
		var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + tooltip.canvas.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);
}

Все работает.

kwin · 9 Мар 2008

только тогда

Код:

<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<style>
#tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
}
</style>

и кинуть tooltip.js в /templates/название_шаблона/js/

Jerry · 10 Мар 2008

Выложите окончательно рабочий вариант.

Goodcat · 10 Мар 2008

ну-ну..а то я попробовал, но тут как s, сделать что-то не так очень сложно что б не заработало..но не работает....киньте нормалный рабочи вариант, а не по всей теме по кускам собирать

kwin · 10 Мар 2008

Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием title="opisanie blablabla" или для картинок alt="opisanie blablabla

<a title="Nulled Warez Scripts" href="http://nulled.ws">nulled.ws</a>

для картинок

<img src="..." alt="NWS" />

=============================================
В main.tpl после

Код:

{headers}

вставить

Код:

<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<style>
#tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
}
</style>

создать файл tooltip.js и кинуть его в /templates/ваш_шаблон/js/

содержание tooltip.js

Код:

var tooltip = {

	/* НАЧАЛО НАСТРОЕК */
	options: {
		attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
		blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"
		newline_entity: "  ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
		max_width: 0, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
		delay: 500, // задержка при показе 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 : e.pageX;
			var y = window.event ? event.clientY + tooltip.canvas.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("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 : window.innerWidth + window.pageXOffset;
		var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + tooltip.canvas.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);
}

можно конфигурировать под себя , в tooltip.js в начале есть небольшие настройки, ну и соответственно с помощью css размеры .. и стиль самого хинта

Goodcat · 10 Мар 2008

ага..тоесть что б картинка увеличивалась то надо добавлять вручную alt=".... или можно как то сделать что б оно автоматически дописывало как название новости, сейчас допустим есть жеш прикол когда на картинку в новости наводиш то пишет название темы...шото я запутался..

Kingi · 10 Мар 2008

Картинка сама увеличиваеться(это встроено в дле),а алт просто показывает название картинки,оно само дописываеться при добавлении новости

Поиск [ищу]всплывающее окошко

Kingi

Мастер

Kaimi

Мой дом здесь!

E-body

C.D.\Zennoposter проекты на заказ

Kingi

Мастер

kwin

Постоялец

Jerry

тот самый Учиха

Goodcat

Постоялец

kwin

Постоялец

Goodcat

Постоялец

Kingi

Мастер