Перейти к публикации

Подскажите реализацию

Stude_nt

Автор: Stude_nt,
в В помощь вебмастеру

 Рассказать Подписчики 0

Рекомендованные сообщения

Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано:

Народ, подскажите пожайлуста, как реализовать всплывающую подсказку типа подобной (пример:http://www.xlifes.ru/) слева блок Сейчас на сайте.

Мне не нужно в блоке что то показывать, необходимо сделать, что бы при наведении на картинку (определённую в новости или единичную ссылку), всплывало окошко с подсказкой (с разными разумеется).

Я сделал следущее: 

<script language="JavaScript" src="/css/tooltips.js"></script>
в папке находится файл tooltips.js со следующим содержанием: 
window.onerror = null;	tooltip = {	/* НАЧАЛО НАСТРОЕК */	attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута  blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"  newline_entity: " ! ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки  max_width: 400, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована  delay: 0, // задержка при показе 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");  //tooltip.t.style.filter = "alpha(opacity=85)"; // buggy in ie5.0  document.body.appendChild(tooltip.t);  a = document.all ? document.all : document.getElementsByTagName("*");  aLength = a.length;  for (var i = 0; i < aLength; i++){	//if (a[i].tagName == "A" || a[i].tagName == "BUTTON" || (a[i].tagName == "INPUT" && (a[i].type == "submit" || a[i].type == "button" || a[i].type == "reset"))) a[i].onclick = self.focus;	if (!a[i]) continue;	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 = "";	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;  tooltip.a(-99, -99);  },	s: function(e){  d = window.event ? window.event.srcElement : e.target;  if (!d.getAttribute(tooltip.attr_name)) return;  s = d.getAttribute(tooltip.attr_name);  if (tooltip.newline_entity){  s = s.replace(/\&/g,"&");  s = s.replace(/\</g,"<");  s = s.replace(/\>/g,">");  s = s.replace(eval("/" + tooltip.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.t.innerText = s;  }  tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';", tooltip.delay);  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); // was true--Opera 7b workaround!  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 = oCanvas.clientWidth ? oCanvas.clientWidth + oCanvas.scrollLeft : window.innerWidth + window.pageXOffset;  w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : oCanvas.clientHeight + oCanvas.scrollTop; // should be vice verca since Opera 7 is crazy!	tooltip.t.style.width = ((tooltip.max_width) && (tooltip.t.offsetWidth > tooltip.max_width)) ? tooltip.max_width + "px" : "auto";	t_width = tooltip.t.offsetWidth;  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";  }  }	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);  }
Так как мне указать, у какой картинки должно быть всплывающее окно или у определённой ссылки? На xlifes.ru используется этот скрипт: (но вот как прикрутить?) 
<script>	function Help(section) {		q=window.open('?mod=help&section='+section, 'Help', 'scrollbars=1,resizable=1,width=450,height=400');	  }	  function ShowOrHide(d1, d2) {		if (d1 != '') DoDiv(d1);		if (d2 != '') DoDiv(d2);	  }	  function DoDiv(id) {		var item = null;		if (document.getElementById) {		  item = document.getElementById(id);		} else if (document.all){		  item = document.all[id];		} else if (document.layers){		  item = document.layers[id];		}		if (!item) {		}		else if (item.style) {		  if (item.style.display == "none"){ item.style.display = ""; }		  else {item.style.display = "none"; }		}else{ item.visibility = "show"; }	   }	var horizontal_offset="9px" //horizontal offset of hint box from anchor link	/////No further editting needed	var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.  var ie=document.all  var ns6=document.getElementById&&!document.all	function getposOffset(what, offsettype){  var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;  var parentEl=what.offsetParent;  while (parentEl!=null){  totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;  parentEl=parentEl.offsetParent;  }  return totaloffset;  }	function iecompattest(){  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body  }	function clearbrowseredge(obj, whichedge){  var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1  if (whichedge=="rightedge"){  var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40  dropmenuobj.contentmeasure=dropmenuobj.offsetWidth  if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)  edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)  }  else{  var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18  dropmenuobj.contentmeasure=dropmenuobj.offsetHeight  if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)  edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight  }  return edgeoffset  }	function showhint(menucontents, obj, e, tipwidth){  if ((ie||ns6) && document.getElementById("hintbox")){  dropmenuobj=document.getElementById("hintbox")  dropmenuobj.innerHTML=menucontents  dropmenuobj.style.left=dropmenuobj.style.top=-500  if (tipwidth!=""){  dropmenuobj.widthobj=dropmenuobj.style  dropmenuobj.widthobj.width=tipwidth  }  dropmenuobj.x=getposOffset(obj, "left")  dropmenuobj.y=getposOffset(obj, "top")  dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"  dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"  dropmenuobj.style.visibility="visible"  obj.onmouseout=hidetip  }  }	function hidetip(e){  dropmenuobj.style.visibility="hidden"  dropmenuobj.style.left="-500px"  }	function createhintbox(){  var divblock=document.createElement("div")  divblock.setAttribute("id", "hintbox")  document.body.appendChild(divblock)  }	if (window.addEventListener)  window.addEventListener("load", createhintbox, false)  else if (window.attachEvent)  window.attachEvent("onload", createhintbox)  else if (document.getElementById)  window.onload=createhintbox	</script>

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано:

Я тоже этим занимался.

Вобщем у надписи должно быть содержание alt="Подсказка" и/или title="Подсказка";

Тогда ToolTips и появляется.

Но ещё в настройках вроде если у ссылки есть атрибут _blank то вылезет подсказка, что откроется в новом окле.

Если нет - нету! :)

Ссылка на сообщение
Поделиться на других сайтах
Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано: (изменено) Автор

Арple,

Спасибо, ты на многое открыл глаза <_<

А в опере пробовал навести на ссылку? Я и спрашивал про javascript, по тому,

что title выводит много шлака, помимо подсказки! Я спрашивал:"Как реализовать?", а не уроки HTML :)

Изменено пользователем Stude_nt
Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано:

Ну так я и говорю, что ToolTips действует на атрибуты alt и title :)

А вообще посмотри скрипт на natahaus.ru

У неё посмотри.

Оперой не пользуюсь - по этому незнаю.

В IE всё норм :)

Ссылка на сообщение
Поделиться на других сайтах
Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано: Автор

Вот именно, что только в осле и отображается... а в опере нет (опера не кривая, а последняя с офсайта v9.10)

Мне нужно универсальное, как на примере сайта (см. выше)

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано: 

<script>	

	function Help(section) {

	  q=window.open('?mod=help§ion='+section, 'Help', 'scrollbars=1,resizable=1,width=450,height=400');

	}

	function ShowOrHide(d1, d2) {

	  if (d1 != '') DoDiv(d1);

	  if (d2 != '') DoDiv(d2);

	}

	function DoDiv(id) {

	  var item = null;

	  if (document.getElementById) {

		item = document.getElementById(id);

	  } else if (document.all){

		item = document.all[id];

	  } else if (document.layers){

		item = document.layers[id];

	  }

	  if (!item) {

	  }

	  else if (item.style) {

		if (item.style.display == "none"){ item.style.display = ""; }

		else {item.style.display = "none"; }

	  }else{ item.visibility = "show"; }

	 }


var horizontal_offset="9px" //horizontal offset of hint box from anchor link


/////No further editting needed


var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.

var ie=document.all

var ns6=document.getElementById&&!document.all


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1

if (whichedge=="rightedge"){

var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)

}

else{

var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

}

return edgeoffset

}


function showhint(menucontents, obj, e, tipwidth){

if ((ie||ns6) && document.getElementById("hintbox")){

dropmenuobj=document.getElementById("hintbox")

dropmenuobj.innerHTML=menucontents

dropmenuobj.style.left=dropmenuobj.style.top=-500

if (tipwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=tipwidth

}

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

dropmenuobj.style.visibility="visible"

obj.onmouseout=hidetip

}

}


function hidetip(e){

dropmenuobj.style.visibility="hidden"

dropmenuobj.style.left="-500px"

}


function createhintbox(){

var divblock=document.createElement("div")

divblock.setAttribute("id", "hintbox")

document.body.appendChild(divblock)

}


if (window.addEventListener)

window.addEventListener("load", createhintbox, false)

else if (window.attachEvent)

window.attachEvent("onload", createhintbox)

else if (document.getElementById)

window.onload=createhintbox

  </script>

  <style>

#hintbox {

 text-align:left;

 width:150px;

 font-size: 10px;

 border: 1px solid #000000;

 background-color: #FFFFFF;

 -moz-opacity: 0.9;

 filter:alpha(opacity="90");

 layer-background-color:#a396d9;

 color:#282828;

 z-index: 3;

 margin: 0px 15px 0px 0px;

 -moz-border-radius:5px;

margin: 10px 0 0 10px;

padding:3px 5px;

position:absolute;

visibility:hidden;

z-index: 3;

}

</style>

/************************************************/

/**************************************************************** /

/****************************************************************/

Про этот код ты сам всё отлично знаеш.

А теперь сама реализация, работающая и в Опере (сам проверял):

<a onMouseover="showhint('Сюда то, что хочеш показать', this, event, '180px')">

Правда просто.

Пихаем этот JavaScript в отдельный файлик, потом подгружаем.

И там, где хотим сделать эту подсказку, вставляем облась <a onMouseover="showhint('Что-то :)', this, event, '180px')">

Помогло? :)

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано:

Нет, это уж никак независит от хоста.

Сейчас пример сделаю!

Вот пример:

http://snowland.jino-net.ru/www.html

Ссылка на сообщение
Поделиться на других сайтах
Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано: Автор

Арple,

Может я конечно туплю, но в твоём примере всё работает, но у тебя готовый пример, я готовых кучу видел, и чего толку?

Ну допустим я создал index.html с содержанием:

<html>	<body>  <script language="JavaScript" src="/1.js"></script>  <table width=100% height=100%>  <tr><td align=center>  <a onMouseover="showhint('<IMG	src=http://www.vip777.de/uploads/posts/1167930205_89.jpg><BR><BR><CENTER>   <FONT color=red size=10>Читать</FONT><CENTER>', this, event, '180px')"	href="http://www.vip777.de/2007/01/04/vesjolye_fotografii_dlja_podnjatija   _nastroenija.html">Наведи мышку сюда</a>  </td></tr>  </table>	</body></html>

Рядом положил файл со скриптом, который ты дал, с названием 1.js

Итог, ссылка есть а окно не всплывает! Вывод-я не правельно подключил!

Можно разжевать, всё таки как подключить на наглядном коде, а не на примере, где не видно изначальный код?

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано: (изменено)

Для начала создаём файл index.html с содержимым:

<HTML>

<HEAD><TITLE>Пример</TITLE>

</HEAD>

<BODY>

Потом в него пихаем этот скрипт (заметь, сразу после BODY вставляем, а не подгружаем!):

<script>	

	function Help(section) {

	  q=window.open('?mod=help&section='+section, 'Help', 'scrollbars=1,resizable=1,width=450,height=400');

	}

	function ShowOrHide(d1, d2) {

	  if (d1 != '') DoDiv(d1);

	  if (d2 != '') DoDiv(d2);

	}

	function DoDiv(id) {

	  var item = null;

	  if (document.getElementById) {

		item = document.getElementById(id);

	  } else if (document.all){

		item = document.all[id];

	  } else if (document.layers){

		item = document.layers[id];

	  }

	  if (!item) {

	  }

	  else if (item.style) {

		if (item.style.display == "none"){ item.style.display = ""; }

		else {item.style.display = "none"; }

	  }else{ item.visibility = "show"; }

	 }


var horizontal_offset="9px" //horizontal offset of hint box from anchor link


/////No further editting needed


var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.

var ie=document.all

var ns6=document.getElementById&&!document.all


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1

if (whichedge=="rightedge"){

var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)

}

else{

var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

}

return edgeoffset

}


function showhint(menucontents, obj, e, tipwidth){

if ((ie||ns6) && document.getElementById("hintbox")){

dropmenuobj=document.getElementById("hintbox")

dropmenuobj.innerHTML=menucontents

dropmenuobj.style.left=dropmenuobj.style.top=-500

if (tipwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=tipwidth

}

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

dropmenuobj.style.visibility="visible"

obj.onmouseout=hidetip

}

}


function hidetip(e){

dropmenuobj.style.visibility="hidden"

dropmenuobj.style.left="-500px"

}


function createhintbox(){

var divblock=document.createElement("div")

divblock.setAttribute("id", "hintbox")

document.body.appendChild(divblock)

}


if (window.addEventListener)

window.addEventListener("load", createhintbox, false)

else if (window.attachEvent)

window.attachEvent("onload", createhintbox)

else if (document.getElementById)

window.onload=createhintbox

  </script>

  <style>

#hintbox {

 text-align:left;

 width:150px;

 font-size: 10px;

 border: 1px solid #000000;

 background-color: #FFFFFF;

 -moz-opacity: 0.9;

 filter:alpha(opacity="90");

 layer-background-color:#a396d9;

 color:#282828;

 z-index: 3;

 margin: 0px 15px 0px 0px;

 -moz-border-radius:5px;

margin: 10px 0 0 10px;

padding:3px 5px;

position:absolute;

visibility:hidden;

z-index: 3;

}

</style>

Затем на страницы пихаем просто скрипт HTML:

<a onMouseover="showhint('<IMG src=http://www.vip777.de/uploads/posts/1167930205_89.jpg><BR><BR><CENTER><FONT color=red size=10>Читать</FONT><CENTER>', this, event, '180px')" href="http://www.vip777.de/2007/01/04/vesjolye_fotografii_dlja_podnjatija_nastroenija.html">Наведи мышку сюда</a>

Ну с этим кодом кто угодно разберётся.

Теперь сохраняем.

Сделаю замечания по этому коду:

Начинается он с <script> а заканчивается тегом </STYLE>

Вроде всё должно работать. :)

Код уже сделан так, что бы можно было только вставить его на страницу.

Он почему-то не подгружается из файла.... не хочет!

Делаю небольшой пример в работе с DLE:

<a onMouseover="showhint('Читать далее...', this, event, '180px')" href="[full-story]Далее..[/full-story]">Продолжение...</a>

Изменено пользователем Арple
Ссылка на сообщение
Поделиться на других сайтах
Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано: Автор

Арple,

Спасибо за конкретику, всё работает! Но вопрос с фильтацией всё же остаётся...

В теле самой новости после вставки кода выглядит так:

Читать  ', this, event, '180px')" href="http://www.vip777.de/2007/01/04/vesjolye_fotografii_dlja_podnjatija_nastroenija.html">Наведи мышку сюда

И как с этим бороться, даже ума не приложу :( Может и на этот вопрос найдётся ответ?

Ссылка на сообщение
Поделиться на других сайтах
Stude_nt

Stude_nt 0

Опубликовано:
Опубликовано: Автор

Арple,

Celsoft, если ответит, то по DLE, а мне интересно глобально, в битриксе, в производных движках нюка и т.д. Просто мне не нужна пароидальная защита, мне не жалко, если сломают сайт (который ещё в проекте), востановить можно всё быстро, тем более, что не планируется посещаемость свыше 200 уников в сутки :) Просто реально интересно это для образования...

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано:

Есть такой уникальный Tool Tips, работает конечно только в IE, но с DLE проблем не возникает.

Если надо - выложу :)

Просто я сам думал, как можно с этим скриптом сделать.

Незнаю.

Тот хватает ссылки и сам их переделывает под всплывающий title :)

Ссылка на сообщение
Поделиться на других сайтах
Lyubovnick2

Lyubovnick2 0

Опубликовано:
Опубликовано:

Создаёш файл tooltips.js кидаеш его в папку css:

window.onerror = null;


tooltip = {


/* НАЧАЛО НАСТРОЕК */


attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута

blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"

newline_entity: " ! ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки

max_width: 400, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована

delay: 0, // задержка при показе 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");

//tooltip.t.style.filter = "alpha(opacity=85)"; // buggy in ie5.0

document.body.appendChild(tooltip.t);

a = document.all ? document.all : document.getElementsByTagName("*");

aLength = a.length;

for (var i = 0; i < aLength; i++){


//if (a[i].tagName == "A" || a[i].tagName == "BUTTON" || (a[i].tagName == "INPUT" && (a[i].type == "submit" || a[i].type == "button" || a[i].type == "reset"))) a[i].onclick = self.focus;


if (!a[i]) continue;


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 = "";


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;

tooltip.a(-99, -99);

},


s: function(e){

d = window.event ? window.event.srcElement : e.target;

if (!d.getAttribute(tooltip.attr_name)) return;

s = d.getAttribute(tooltip.attr_name);

if (tooltip.newline_entity){

s = s.replace(/\&/g,"&amp;");

s = s.replace(/\</g,"&lt;");

s = s.replace(/\>/g,"&gt;");

s = s.replace(eval("/" + tooltip.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.t.innerText = s;

}

tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';", tooltip.delay);

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); // was true--Opera 7b workaround!

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 = oCanvas.clientWidth ? oCanvas.clientWidth + oCanvas.scrollLeft : window.innerWidth + window.pageXOffset;

w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : oCanvas.clientHeight + oCanvas.scrollTop; // should be vice verca since Opera 7 is crazy!


tooltip.t.style.width = ((tooltip.max_width) && (tooltip.t.offsetWidth > tooltip.max_width)) ? tooltip.max_width + "px" : "auto";


t_width = tooltip.t.offsetWidth;

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";

}

}


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);

}
Потом в style.css запихиваеш: 
#tooltip{

background:#FFFFFF;

border:1px solid #666666;

color:#333333;

font:menu;

margin:0px;

padding:3px 5px;

position:absolute;

visibility:hidden

}

Потом в main.tpl в самое начало, сразу после <html><head>:

<script language="JavaScript" src="tooltips.js"></script>

Данный скрипт проверен лично мной!

Всё работает

Но в случае если:

Ссылка имеет параметр title="" а картинка alt="" :)

Работает как для Stude_nt, так и для mlasar,

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...