| |
|
|
| | как сделать текст рядом с мышькой, но не через title или alt, а как-то по другому чтобы текст перемещался вместе с мышькой | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 00:03)
| | | ну всплывающая подсказка рядом с курсором при наведении на ссылку
как сделать? | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 00:34)
| | | Делаете div, в него пишете нужный текст, сам див прячете (display: none; z-index: 100; position: absolute;).
Нужному элементу цепляете обработчики onmouseover и onmouseout.
По onmouseover определяете координаты элемента, вычисляете положение вашего дива с подсказкой, позиционируете его, показываете (display: block);
По onmouseout просто прячете див (display: none;).
Ну вот примерно так :) Примеры на форуме выкладывали. Там ссылка на сайт с примерами (очень хорошими) на JS. | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 00:03)
| | | для решения подобной задачи есть событие мыши onMouseMove, благодаря ему фиксируйте положение координаты мыши и поступаете как описано в посте за (29.10.2006 в 01:12) | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 01:35)
| | | Да я б сделал еслибы jav'у знал. Я её вообще незнаю.
Мне от неё надо только эту штуку.. на изучение просто времени нету.
Мож есть у кого-нить недолеко скрипт этой штуки? В коде то я разберусь и подспралю что под себя | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 02:07)
| | | скрипт был, ща найду и выложу | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 02:07)
| | |
<html>
<head>
<script>
function moveDiv()
{
if(document.getElementById("doc").scrollTop > 0)
{
document.getElementById("dv").style.left = event.clientX;
document.getElementById("dv").style.top = (event.clientY + document.getElementById("doc").scrollTop);
}
else
{
document.getElementById("dv").style.left = event.clientX;
document.getElementById("dv").style.top = event.clientY;
}
}
function divStartPos()
{
if(document.getElementById("doc").scrollTop > 0)
{
document.getElementById("dv").style.left = event.clientX;
document.getElementById("dv").style.top = (event.clientY + document.getElementById("doc").scrollTop);
}
else
{
document.getElementById("dv").style.left = event.clientX;
document.getElementById("dv").style.top = event.clientY;
}
}
</script>
</head>
<body id="doc" onLoad="divStartPos()" onMouseMove="moveDiv()" onScroll="moveDiv()">
<div id="dv" style="position:absolute; left:0; top:0; height:120; width:126; z-index:2;">
</div>
</body>
</html>
|
если чего не так, обращайся, доработаем. | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 02:14)
| | | ну этот скрип по-мойму только под ИЕ | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 02:14)
| | | эмм.. тут она вапче за мышькой гоняет по жизни, а я хотел чтоб када допустим на ссылку наводишь. попробовал изменить div и id чето неправильно делаю.. не работает | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 10:42)
| | | а ну подробней, а то я чего-то не понял | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 13:40)
| | | во лянь как тут http://www.freelance.ru/
слева вверху в меню, когда наводишь на тект, то описание вылезает не просто где курсор был, а оно ещё и двигается рядом с курсором | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 16:02)
| | | теперь понял :), я ближе к ночи скрипт выложу. | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 16:56)
| | | Зарание спасибо :) | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 16:02)
| | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Всплывающая подсказка</title>
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {margin:0; padding: 0 0 0 5px;}
#dv{ display:none;}
</style>
<script language="javascript">
<!--
d = document;
x = 0;
y = 0;
d.onmousemove = function(e){
x = (d.all) ? event.clientX : e.pageX;
y = (d.all) ? event.clientY : e.pageY;
return x, y;
}
function moveDiv(text)
{
if(d.body.scrollTop > 0)
{
d.getElementById("dv").style.left = x;
d.getElementById("dv").style.top = (y+5) + d.body.scrollTop;
d.getElementById("dv").style.display = 'inline';
}
else
{
d.getElementById("dv").style.left = x;
d.getElementById("dv").style.top = (y+5);
d.getElementById("dv").style.display = 'inline';
}
d.getElementById("dv").innerHTML = text;
}
function hideDv(){
d.getElementById("dv").style.display = 'none';
}
//-->
</script>
</head>
<body>
<a href="#" onMouseMove="moveDiv('first')" onMouseOver="moveDiv('first')"
onMouseOut="hideDv()">anchor 1</a><br>
<a href="#" onMouseMove="moveDiv('second')" onMouseOver="moveDiv('second')"
onMouseOut="hideDv()">anchor 2</a><br>
<a href="#" onMouseMove="moveDiv('third')" onMouseOver="moveDiv('third')"
onMouseOut="hideDv()">anchor 3</a><br>
<!-- Можно получить значение из титла данной ссылки или любого другого
атрибута используя attributes[необходимый_атрибут].value -->
<a href="#" onMouseMove="moveDiv(this.attributes['title'].value)"
onMouseOver="moveDiv(this.attributes['title'].value)" onMouseOut="hideDv()" title="value 4">
anchor 4</a><br>
<div id="dv"
style="position:absolute; left:0; top:0; height:auto; width:auto; z-index:2; background-color:#CCCCCC; padding: 2px 2px 2px 15px;">
</div>
</body>
</html>
|
минусы:
для полноценной работы необходимо прописывать в каждой ссылке действия на три события
плюсы:
можно поставить только для необходимых ссылок, ибо для всех ссылок - это перебор | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 18:25)
| | | если необходимо, могу доработать для действия под определенные ИД ссылок | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 18:25)
| | | я так понял чтобы появлялся текст надо ссылку делать такого вида <a href="#" onMouseMove="moveDiv('first')" onMouseOver="moveDiv('first')"
onMouseOut="hideDv()">anchor 1</a>
я думаю можно вместо first подставить переменную из php с первичным значением ссылки (id ссылки) и по id выводить текст из другого поля ?
>если необходимо, могу доработать для действия под определенные ИД ссылок
я думаю ненадо т.к. у меня движок id ссылок сам расставляет и невозможно узнать какой id был, будет и на какой он изменится
За скрипт огромное спасибо | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 19:44)
| | | >я так понял чтобы появлялся текст надо ссылку делать такого вида <a href="#" onMouseMove="moveDiv('first')" onMouseOver="moveDiv('first')"
>onMouseOut="hideDv()">anchor 1</a>
>
вместо first необходимо ставит текст, который будет выводиться как подсказка
<a href="#" onMouseMove="moveDiv('текст подсказка')" onMouseOver="moveDiv('текст подсказка')" onMouseOut="hideDv()">anchor 1</a>
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(29.10.2006 в 20:44)
| | | ну значит вместо них можно вставить переменные из php, а это радует.. спасибо | |
| |
|
|
| |
|
|
| |
для: ChieFSS
(29.10.2006 в 20:47)
| | | да, присваивай переменным текст подсказки:
<?php
$help_1 = "Help text 1";
$help_2 = "Help text 2";
echo '<a href="#" onMouseMove="moveDiv('.$help_1.')" onMouseOver="moveDiv('.$help_1.')" onMouseOut="hideDv()">anchor 1</a>';
echo "\n<br>";
echo '<a href="#" onMouseMove="moveDiv('.$help_2.')" onMouseOver="moveDiv('.$help_2.')" onMouseOut="hideDv()">anchor 1</a>';
?>
|
| |
| |
|
|
