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

Это слой с абсолютной позицией(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>

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

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

Цитата

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

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

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

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

Цитата(Aliance @ 23.10.2004, 16:02)

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

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

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

Код

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>

О, большое спасибо!
У вас отличный форум!!!

Цитата(Sardar @ 23.10.2004, 21:52)

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

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

Цитата

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

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


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

Цитата(Aliance @ 24.10.2004, 17:55)

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

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

Цитата(Aliance @ 24.10.2004, 18:55)

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

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

Код

var x=window.event? window.event.x: ev.clientX; //координаты мыши var y=window.event? window.event.y: ev.clientY;

тутЪ

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

Цитата(Aliance @ 25.10.2004, 17:49)

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

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

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

Цитата

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

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

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

А вот эти стили ты не забыла:

Код

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

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

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

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

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

Нет, нет, в тот

Только что роблема решилась, когда я заменил

Код

obj.style.left=x + offsetX; //сдивагаем

на

Код

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

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

Всем привет.

Я хочу сделать чуть более продвинутую подсказку, с 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 знаю, как можно догадаться, не очень

Это сообщение отредактировал(а) Aliance - 11.4.2005, 20:15

Вот эта строка браузерам не знакома: document.createTextRange();

Код

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

Спасибо громадное!

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

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

Ёлки, а ведь работало и не глючило

Иль спасибо

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

Sardar, а почему

Цитата

любая разметка кроме таблиц

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

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

Код

obj.appendChild(tip);

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

Цитата

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

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

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

Цитата

Sardar, а почему Цитата любая разметка кроме таблиц

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

Цитата

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

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

Цитата

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

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

Код

<!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>

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

Цитата

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

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

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

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

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

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

Это сообщение отредактировал(а) elemic - 20.9.2015, 00:41