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

Тема в разделе "DLE", создана пользователем Kingi, 9 мар 2008.

Информация :
Актуальная версия DataLife Engine 11.3
( Final Release v.11.3 | Скачать DataLife Engine | Скачать 11.3 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.2 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Статус темы:
Закрыта.
Модераторы: killoff
  1. Kingi

    Kingi

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

    Kaimi

    Регистр.:
    28 окт 2007
    Сообщения:
    257
    Симпатии:
    253
    Если не найдешь готовое решение - попробуй переделать под себя скрипт
    Перейти по ссылке

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

    E-body

    Регистр.:
    6 сен 2007
    Сообщения:
    983
    Симпатии:
    320
    Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием title="opisanie blablabla"

    Не будет работать если:
    Появится при наведении курсора Nulled Warez Scripts

    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")>-&& this.dom) ? 1:0;
    this.ie6 = (this.ver.indexOf("MSIE 6")>-&& 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.firstChildhint.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];
    window.event event.clientX vc.scrollLeft advance.pageX;
    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((
    hint.offsetWidth 15) > vcwidth){
    hint.style.left hint.offsetWidth 4;
    } else {
    hint.style.left 15;
    }
    if((
    hint.offsetHeight 19) > vcheight){
    hint.style.top hint.offsetHeight;
    } else {
    hint.style.top 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=0iatr document.getElementsByTagName(hintmarker);
    for(var 
    j=0jif(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>
     
  4. Kingi

    Kingi

    Регистр.:
    13 фев 2008
    Сообщения:
    153
    Симпатии:
    30
    Все сделал как написал,но просто титл отображаеться(без окошка).Перейти по ссылке. Изменил первые ссылки в меню(главная и форум)

    Сделал по другому:
    в 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);
    }
    Все работает.
     
  5. kwin

    kwin

    Регистр.:
    22 авг 2007
    Сообщения:
    413
    Симпатии:
    167
    только тогда

    Код:
    <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/
     
  6. Jerry

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

    Регистр.:
    16 апр 2006
    Сообщения:
    1.226
    Симпатии:
    490
    Выложите окончательно рабочий вариант.
     
  7. Goodcat

    Goodcat Постоялец

    Регистр.:
    14 фев 2008
    Сообщения:
    91
    Симпатии:
    54
    ну-ну..а то я попробовал, но тут как s, сделать что-то не так очень сложно что б не заработало..но не работает....киньте нормалный рабочи вариант, а не по всей теме по кускам собирать :)
     
  8. kwin

    kwin

    Регистр.:
    22 авг 2007
    Сообщения:
    413
    Симпатии:
    167
    Всплывающая подсказка появиться только в том случае если в ссылке имеется тег с описанием title="opisanie blablabla" или для картинок alt="opisanie blablabla

    для картинок


    =============================================
    В 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 размеры .. и стиль самого хинта
     
    xXxiii, sidor и Jerry нравится это.
  9. Goodcat

    Goodcat Постоялец

    Регистр.:
    14 фев 2008
    Сообщения:
    91
    Симпатии:
    54
    ага..тоесть что б картинка увеличивалась то надо добавлять вручную alt=".... или можно как то сделать что б оно автоматически дописывало как название новости, сейчас допустим есть жеш прикол когда на картинку в новости наводиш то пишет название темы...шото я запутался..
     
  10. Kingi

    Kingi

    Регистр.:
    13 фев 2008
    Сообщения:
    153
    Симпатии:
    30
    Картинка сама увеличиваеться(это встроено в дле),а алт просто показывает название картинки,оно само дописываеться при добавлении новости
     
Статус темы:
Закрыта.