Как создать свою подсказку

 
0
 
JavaScript
ava
Катюша | 23.10.2004, 15:25
Здравствуйте.
Я видела на некоторых сайтах, что при наведении курсором на картинку, ссылку или даже просто текст, появляется подсказка, но не такая как при alt или title, а в стиле сайта (цвет фона, шрифта и т.д.), причем появляется мгновенно и следует за курсором.
Не могу найти код, и самой дотумкать не получается.
Помогите пожалуйста!!!
Comments (33)
ava
Sardar | 23.10.2004, 14:52 #
Это слой с абсолютной позицией(position: absolute), который бегает за твоей мышью(событие onmouseover) smile
Попробуем сообразить:
<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>


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

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

А код и вправду по-изящнее нужно сделать ;)
ava
Катюша | 23.10.2004, 17:06 #
А как поизящнее?
Стиль то я могу написать, а вот с остальным проблемка.
2px относительно 1 слоя?
ava
Sardar | 23.10.2004, 21:52 #
Цитата (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>
ava
Катюша | 24.10.2004, 08:07 #
О, большое спасибо!
У вас отличный форум!!!
ava
Aliance | 24.10.2004, 18:55 #
Цитата (Sardar @ 23.10.2004, 21:52)


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


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


Цитата


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


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


Sardar, собственно, уже все написал ... ))))))
ava
Sardar | 25.10.2004, 00:56 #
Цитата (Aliance @ 24.10.2004, 17:55)


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


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


 

Если вниз от текста, то увеличится просто первый слой и залезет на другой.
У меня два слоя один под другим. В обоих что-то написано. В первый - постоянно добовляется, обновляется и прр. Он меняет размер. То длинше, то короче. А надо чтобы с изменениями размера первго, между первым и вторым всегда было одинаковое расстояние. Тоесть второй то поднимался, то опускался.
Может коряво написала, но смысл такой.
ava
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
ava
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-...pt-binding.html
ava
Катюша | 25.10.2004, 19:51 #
Sardar, в IE и правда при открытии этот слой подсказки сразу виден, только потом пропадает.
ava
Sardar | 25.10.2004, 20:21 #
Цитата


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


Катюша такого не может быть по определению smile
Подсказка создается после загрузки, т.е. в момент загрузки слоев с подсказкой еще не существует. Если ты используешь мой код из второго поста... ;-)
ava
Катюша | 26.10.2004, 05:26 #
Да, именно из второго. Я просто сначала посмотрела на чистой странице как это работает. Загружается с этим слоем, его видно. А после наведения курсора он начинае пропадать и появляться уже когда надо.
ava
Sardar | 26.10.2004, 09:31 #
А вот эти стили ты не забыла: ;-)
<style type="text/css">
.tool_tip {
/* required */
position: absolute; /* эти 2 свойства */
visibility: hidden; /* необходимы */
/* styles */
/* а здесь можешь менять все что захочешь. */
}
</style>
ava
Катюша | 26.10.2004, 11:18 #
Да, да, да!
Второй попробовала и все тоже самое.
Первый вариант - (не знаю уж чем корявый) отлично все работало.
А вот второй загружается сразу с подсказкой если в IE смотреть. А потом при наводку на слово test она пропадает.
ava
Sardar | 26.10.2004, 21:05 #
Посмотрел на свой код, замeтил такое в стилях: /* required /* - коментарий открыт smile
Кать, скопируй без изменений стиль который я во второй раз запостил(на этой странице самый первый пост ;-) ) или закрой коментарий выше.
ava
sergejzr | 11.11.2004, 22:06 #
Чегото obj.style.left в мозилле устанавливаться не хочет :( top ОК, а left не сдвигает направо ...
ava
Sardar | 11.11.2004, 22:36 #
В смысле в моем скрипте? у меня всё правильно работает...
Сергей, может ты не в тот топик запостил? smile
ava
sergejzr | 11.11.2004, 22:44 #
Нет, нет, в тот :)

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

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


То есть добавил "px"
ava
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
ava
Sardar | 15.11.2004, 21:25 #
Вот эта строка браузерам не знакома: document.createTextRange(); :)


//-- Разметка подсказки ---
var tip=document.createElement("DIV"); //создали слой
tip.className="tool_tip"; //стили
tip.innerHTML="<img src='./imgs/kartinka.gif'><b>"+text+"</b>"; //любая разметка кроме таблиц
obj.appendChild(tip);
ava
dm9 | 15.11.2004, 21:29 #
Спасибо громадное!
ava
it3xl.ru | 10.04.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
ava
Sardar | 10.04.2005, 23:25 #
Ёлки, а ведь работало и не глючило smile smile smile

Иль спасибо smile
ava
it3xl.ru | 11.04.2005, 20:05 #
Может от того что объектов не много? У меня-то полно. Только сейчас руки дошли это применить. Буду завтра внедрять. Вещь крайне необходимая.
ava
it3xl.ru | 11.04.2005, 20:20 #
Sardar, а почему
Цитата
любая разметка кроме таблиц
ava
it3xl.ru | 12.04.2005, 14:34 #
Хочу спросить перед тем как применить: Вариант когда подсказка генерируется в обработчике событий, а не создается при загрузке страницы. Какие будут мнения. Есть тут какая-нибудь рациональность. Объясните, почему выбран вариант нивидиммых готовых подсказок?

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

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


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

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

А если полностью генерировать его - то при большой загрузке это будет очень долго.
ava
Sardar | 12.04.2005, 15:46 #
Цитата
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>
ava
guest | 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>



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

Заранее благодарен.
ava
Sardar | 20.11.2005, 04:01 #
Вероятно создать кучу подсказок ;-) И как в твоём коде стоит, задавать им постоянное место, что сразу дико работать будет при разных разрешениях экрана.

Вывод: глянуть на пост выше, там мой кодм, очень и ясный, всё делает за тебя, только текст сам задай.
Подсказки по сложней, но гораздо больше возможностей. Вообще юзаються как контекстные меню к разным элементам на странице:
http://forum.vingrad.ru/index.php?showtopi...st&p=539410
ava
elemic | 20.09.2015, 00:41 #
Так как при наведение вывод атрибута тайтел сделать мгновенным? Так и не поняла...
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit