Здравствуйте.
Я видела на некоторых сайтах, что при наведении курсором на картинку, ссылку или даже просто текст, появляется подсказка, но не такая как при 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 и правда при открытии этот слой подсказки сразу виден, только потом пропадает.

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

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