Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как создать свою подсказку


Автор: Катюша 23.10.2004, 14:25
Здравствуйте.
Я видела на некоторых сайтах, что при наведении курсором на картинку, ссылку или даже просто текст, появляется подсказка, но не такая как при alt или title, а в стиле сайта (цвет фона, шрифта и т.д.), причем появляется мгновенно и следует за курсором.
Не могу найти код, и самой дотумкать не получается.
Помогите пожалуйста!!!

Автор: Sardar 23.10.2004, 14:52
Это слой с абсолютной позицией(position: absolute), который бегает за твоей мышью(событие onmouseover) :)
Попробуем сообразить:
Код
<script language="Javascript" type="text/javascript">
<!--
var offsetX=20; //смещение от мыши,
var offsetY=10; //что бы курсор не мешал
function runtest(ev, activ) {
 var x=window.event? window.event.x: ev.clientX; //координаты мыши
 var y=window.event? window.event.y: ev.clientY;
 var obj=document.getElementById("test"); //наш бегющий слой
 if(activ) {
   obj.style.visibility="visible"; //показываем
   obj.style.left=x + offsetX; //сдивагаем
   obj.style.top=y + offsetY; //куда надо
 } else obj.style.visibility="hidden"; //либо скрываем слой
}
//-->
</script>
<div id="test" style="visibility: hidden; position: absolute; width: 200px; height: 100px; background-color:#a5b5f3">
Я подсказка к ссылке
</div>
<a href="#" onmousemove="runtest(event, true)" onmouseout="runtest(event, false)">Test</a>


Это только пример кода, сразу вставлять его не стоит, опиши задачу, сделаем изящней :)

Автор: Катюша 23.10.2004, 15:31
Задача такая.
Я делаю сайт ребятам, которые занимаются ароматизацией продукции.
Некое подобие начала можно посмотреть на http://www.smdnsk.ru
Это только начало, вариант.
Так вот, у них планируется обширный каталог с фотографиями продукции, а также статьи с терминами, которые пользователь возможно не знает.
Хотелось бы (так как картинок в каталоге много), чтобы при пападании курсора на картинку, выводился текст, что это такое и предложение нажать для увеличении картинки, тоже самое хочется и для терминов.
При наведении на термины, курсор меняется на вопрос (это я знаю как делать) и подсказка - объяснение.
как лучше сделать?
И еще вопрос в тему. как сделать, чтобы 2 слой, который стоит ниже 1-го (div), по мере увеличения (растяжения) первого вниз, смещался, выдерживая расстояния между ними?

Автор: Aliance 23.10.2004, 17:02
Цитата
И еще вопрос в тему. как сделать, чтобы 2 слой, который стоит ниже 1-го (div), по мере увеличения (растяжения) первого вниз, смещался, выдерживая расстояния между ними?

Если я правельно понял, это нужно прописать top: (скажем) 2px в стиле позиционируемого элемента!

А код и вправду по-изящнее нужно сделать ;)

Автор: Катюша 23.10.2004, 17:06
А как поизящнее?
Стиль то я могу написать, а вот с остальным проблемка.
2px относительно 1 слоя?

Автор: Sardar 23.10.2004, 21:52
Цитата(Aliance @ 23.10.2004, 16:02)
А код и вправду по-изящнее нужно сделать ;)

Ну подметил, напиши лучше smile

Катюша я показал как это вообще работает, теперь сделаем код удобным.
Определим две функции, одна будет создавать подсказку, другая перебирать элементы после загрузки и создавать подсказку кому нужно.
Код
ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=10; //

function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;
      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
//   return;
    var tags, tooltext;
    for(var i=0; i<arguments.length; i++) {
       tags=document.body.getElementsByTagName(arguments[i]);
       for(var j=0; j<tags.length; j++)
            if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
   }
}

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

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

<style type="text/css">
.tool_tip {
 /* required /*
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>

И пример:
Код
<body onload="initToolTips('SPAN','IMG')">
  <span tooltip="Подсказка =)">Test</span>
</body>

Автор: Катюша 24.10.2004, 08:07
О, большое спасибо!
У вас отличный форум!!!

Автор: Aliance 24.10.2004, 18:55
Цитата(Sardar @ 23.10.2004, 21:52)

Ну подметил, напиши лучше

Да я в твоих способностях не сомневаюсь, просто глянул мельков, увидел несоответствие W3C ... :-)))))))))))))


Цитата

2px относительно 1 слоя?

Два - это к примеру, это будет отступ от самого текста вниз на 2 пикселя ;-)


Sardar, собственно, уже все написал ... ))))))

Автор: Sardar 25.10.2004, 00:56
Цитата(Aliance @ 24.10.2004, 17:55)

росто глянул мельков, увидел несоответствие W3C

И хде це несоответствие? ;-)

Автор: Катюша 25.10.2004, 06:14
Цитата(Aliance @ 24.10.2004, 18:55)
Два - это к примеру, это будет отступ от самого текста вниз на 2 пикселя ;-)


Если вниз от текста, то увеличится просто первый слой и залезет на другой.
У меня два слоя один под другим. В обоих что-то написано. В первый - постоянно добовляется, обновляется и прр. Он меняет размер. То длинше, то короче. А надо чтобы с изменениями размера первго, между первым и вторым всегда было одинаковое расстояние. Тоесть второй то поднимался, то опускался.
Может коряво написала, но смысл такой.

Автор: Aliance 25.10.2004, 18:49
Код
var x=window.event? window.event.x: ev.clientX; //координаты мыши
var y=window.event? window.event.y: ev.clientY;

тутЪ

И, кажеться, offset тоже IE только поддерживает :rolleyes

Автор: Sardar 25.10.2004, 19:12
Цитата(Aliance @ 25.10.2004, 17:49)

тутЪ
И, кажеться, offset тоже IE только поддерживает :rolleyes

Дык я оффсеты не использовал, то были мои переменные. А client(XY) расчитанны на Мозиллу, это DOM'овые свойства:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/ecma-script-binding.html

Автор: Катюша 25.10.2004, 19:51
Sardar, в IE и правда при открытии этот слой подсказки сразу виден, только потом пропадает.

Автор: Sardar 25.10.2004, 20:21
Цитата

Sardar, в IE и правда при открытии этот слой подсказки сразу виден, только потом пропадает.

Катюша такого не может быть по определению :)
Подсказка создается после загрузки, т.е. в момент загрузки слоев с подсказкой еще не существует. Если ты используешь мой код из второго поста... ;-)

Автор: Катюша 26.10.2004, 05:26
Да, именно из второго. Я просто сначала посмотрела на чистой странице как это работает. Загружается с этим слоем, его видно. А после наведения курсора он начинае пропадать и появляться уже когда надо.

Автор: Sardar 26.10.2004, 09:31
А вот эти стили ты не забыла: ;-)
Код
<style type="text/css">
.tool_tip {
/* required */
position: absolute; /* эти 2 свойства */
visibility: hidden; /* необходимы */
/* styles */
/* а здесь можешь менять все что захочешь. */
}
</style>

Автор: Катюша 26.10.2004, 11:18
Да, да, да!
Второй попробовала и все тоже самое.
Первый вариант - (не знаю уж чем корявый) отлично все работало.
А вот второй загружается сразу с подсказкой если в IE смотреть. А потом при наводку на слово test она пропадает.

Автор: Sardar 26.10.2004, 21:05
Посмотрел на свой код, замeтил такое в стилях: /* required /* - коментарий открыт :)
Кать, скопируй без изменений стиль который я во второй раз запостил(на этой странице самый первый пост ;-) ) или закрой коментарий выше.

Автор: sergejzr 11.11.2004, 22:06
Чегото obj.style.left в мозилле устанавливаться не хочет smile top ОК, а left не сдвигает направо ...

Автор: Sardar 11.11.2004, 22:36
В смысле в моем скрипте? у меня всё правильно работает...
Сергей, может ты не в тот топик запостил? smile

Автор: sergejzr 11.11.2004, 22:44
Нет, нет, в тот smile

Только что роблема решилась, когда я заменил
Код
obj.style.left=x + offsetX; //сдивагаем

на
Код
obj.style.left=x + offsetX+"px"; //сдивагаем


То есть добавил "px"

Автор: dm9 15.11.2004, 21:09
Всем привет.

Я хочу сделать чуть более продвинутую подсказку, с html-кодом внутри, а не просто с текстом.

Пытаюсь заменить
Код

tip.className="tool_tip";
tip.appendChild(document.createTextNode(text));
obj.appendChild(tip);


на
Код

tip.className="tool_tip";
var ert = document.createTextRange();
ert.pasteHTML("123<br>456");
tip.appendChild(ert);
obj.appendChild(tip);


Сие не работает... Вопрос - как реализовать то, что я хочу...
PS JavaScript знаю, как можно догадаться, не очень smile

Автор: Sardar 15.11.2004, 21:25
Вот эта строка браузерам не знакома: document.createTextRange(); smile

Код

//-- Разметка подсказки ---
 var tip=document.createElement("DIV"); //создали слой
 tip.className="tool_tip"; //стили
 tip.innerHTML="<img src='./imgs/kartinka.gif'><b>"+text+"</b>"; //любая разметка кроме таблиц
 obj.appendChild(tip);

Автор: dm9 15.11.2004, 21:29
Спасибо громадное!

Автор: Иль 10.4.2005, 17:56
Sardar, почему
Цитата(Sardar @ 15.11.2004, 21:25)
любая разметка кроме таблиц


замети надо i на j поменять
Цитата(Sardar @ 23.10.2004, 21:52)
for(var j=0; j<tags.length; j++)
          if((tooltext=tags[i].getAttribute("tooltip"))) ToolTip(tags[i], tooltext);

Это мой любимый на все времена топик. Дверь, через которую я вошел на Винград smile

Автор: Sardar 10.4.2005, 23:25
Ёлки, а ведь работало и не глючило smile smile smile

Иль спасибо smile

Автор: Иль 11.4.2005, 20:05
Может от того что объектов не много? У меня-то полно. Только сейчас руки дошли это применить. Буду завтра внедрять. Вещь крайне необходимая.

Автор: Иль 11.4.2005, 20:20
Sardar, а почему
Цитата
любая разметка кроме таблиц

Автор: Иль 12.4.2005, 14:34
Хочу спросить перед тем как применить: Вариант когда подсказка генерируется в обработчике событий, а не создается при загрузке страницы. Какие будут мнения. Есть тут какая-нибудь рациональность. Объясните, почему выбран вариант нивидиммых готовых подсказок?

Sardar ИЕ не хочет smile создавать узел, родителем которого является IMG.
Код

obj.appendChild(tip);
Тогда можно либо поместить все нужные IMG в <SPAN>(или другую разметку), либо вставить подсказку соседом IMG (от чего, правда, она противно мерцает)

Автор: Aliance 12.4.2005, 14:52
Цитата
Хочу спросить перед тем как применить: Вариант когда подсказка генерируется в обработчике событий, а не создается при загрузке страницы. Какие будут мнения. Есть тут какая-нибудь рациональность. Объясните, почему выбран вариант нивидиммых готовых подсказок?

Т.к. уже готовый контент будет появляться мнговенно, т.к. мы просто меняем его видимость / отображение.

А если полностью генерировать его - то при большой загрузке это будет очень долго.

Автор: Sardar 12.4.2005, 15:46
Цитата
Sardar, а почему
Цитата
любая разметка кроме таблиц

А я такого не говорил...

Цитата
Объясните, почему выбран вариант нивидиммых готовых подсказок?

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

Цитата
Sardar ИЕ не хочет smile создавать узел, родителем которого является IMG.

Логически это верное поведение, тег IMG не является парным, но против спецификации от W3C, где каждая нода может иметь в себе поддерево(теоретически...)
Выборку тултипа я делал по id, следовательно можем ставить тултип куда угодно. Кстати у меня ошибка в расчёте координат, приводящая к проблеме на больших страницах под ИЕ. Переписываем по новой, извиняюсь smile

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.tool_tip {
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>

<script type="text/javascript">
<!--
ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=10; //

function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;
      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
//   return;
    var tags, tooltext;
    for(var i=0; i<arguments.length; i++) {
       tags=document.body.getElementsByTagName(arguments[i]);
       for(var j=0; j<tags.length; j++)
            if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
   }
}
//-->
</script>
</head>

<body onload="initToolTips('SPAN','IMG')">
  <span tooltip="<b>Подсказка =)</b>">Test</span>
</body>
</html>

Автор: karlito 20.11.2005, 03:03
Подскажите пожалуста новичку как сделать чтобы коментарии появлялись разные к разным линкам.

Цитата
<div id="test" style="visibility: hidden; position: absolute; width: 200px; height: 100px; background-color:#a5b5f3">
Я подсказка к ссылке
</div>
<a href="#" onmousemove="runtest(event, true)" onmouseout="runtest(event, false)">Test</a>


Я использовал первый пример.

Заранее благодарен.

Автор: Sardar 20.11.2005, 04:01
Вероятно создать кучу подсказок smile И как в твоём коде стоит, задавать им постоянное место, что сразу дико работать будет при разных разрешениях экрана.

Вывод: глянуть на пост выше, там мой кодм, очень и ясный, всё делает за тебя, только текст сам задай.
Подсказки по сложней, но гораздо больше возможностей. Вообще юзаються как контекстные меню к разным элементам на странице:
http://forum.vingrad.ru/index.php?showtopic=53318&view=findpost&p=539410

Автор: elemic 20.9.2015, 00:41
Так как при наведение вывод атрибута тайтел сделать мгновенным? Так и не поняла...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)