• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.
    Помогите модератору этого раздела killoff лично.

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

Статус
В этой теме нельзя размещать новые ответы.

Kingi

Мастер
Регистрация
13 Фев 2008
Сообщения
153
Реакции
30
Здравствуйте. Как сделать всплывающее окошко, что бы когда наводишь на ссылку, показывалось маленькое окошко. Пример colorworld.org
Если такое было то не баньте, я просто не нашел похожей темы.
 
Если не найдешь готовое решение - попробуй переделать под себя скрипт
Для просмотра ссылки Войди или Зарегистрируйся

Я его как то раз использовал для создания всплывающего окошка с фотографией.
 
Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием 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>
 
Все сделал как написал,но просто титл отображаеться(без окошка).Для просмотра ссылки Войди или Зарегистрируйся. Изменил первые ссылки в меню(главная и форум)

Сделал по другому:
в 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);
}

Все работает.
 
только тогда

Код:
<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/
 
Выложите окончательно рабочий вариант.
 
ну-ну..а то я попробовал, но тут как s, сделать что-то не так очень сложно что б не заработало..но не работает....киньте нормалный рабочи вариант, а не по всей теме по кускам собирать :)
 
Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием 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 размеры .. и стиль самого хинта
 
ага..тоесть что б картинка увеличивалась то надо добавлять вручную alt=".... или можно как то сделать что б оно автоматически дописывало как название новости, сейчас допустим есть жеш прикол когда на картинку в новости наводиш то пишет название темы...шото я запутался..
 
Картинка сама увеличиваеться(это встроено в дле),а алт просто показывает название картинки,оно само дописываеться при добавлении новости
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху