Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/18: Рейтинг темы: голосов - 18, средняя оценка - 4.83
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 118
1

Привязка элемента к курсору

19.07.2016, 20:04. Просмотров 3452. Ответов 1

Привет,помогите создать следующий за курсором div контейнер,нужно чтобы при наводке становилось visibility:visible;
Код я уже реализовал,но работает он не везде,на пустом сайте с 1 дивом,перемещается за курсором,на сайте где куча дивов и элементов - далеко от курсора,растягивает страницу горизонтально и тд.
Нужно просто чтобы он следовал за курсором,был как бы вниз-правее(типично).
Относительно,страницы,род элемента,элемента,экрана клиента.
Это всплывающая подсказка,которая разворачивается и сворачивается,дизайн настроил.

HTML5
1
2
3
4
5
 <div id="mydiv" style="margin:0px auto;border:1px #000 solid; width:100px;height:100px;" onDblClick="anim('Пример текста который выводится сюда')" onClick="noanim();"> <!-- Пример элемента на которого наведен курсор -->
      <div id="myimg" class="div">  <!-- И есть сама подсказка -->
      <b>Кликните дважды чтобы развернуть</b>   <hr>  <span id="inner">Содержимое...</span> <!-- текст в подсказке -->
      </div>
      </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  div = document.getElementById("mydiv");// Контейнер на который кликаем/наводим курсор,чтобы появилась див-подсказка
     div.onmousemove = function(e){               //
      img = document.getElementById("myimg"); //обрабатывает наведение курсора на див,делает его видимым,привязывает к курсору       
      img.style.visibility="visible";                  //
      img.style.top = e.clientY+"px";            // Это фрагмент кода который нужно изменить :(
      img.style.left = e.clientX+"px"; }         //
 
 
 
 
 
 
 
      div.onmouseout = function() {                                          //Ниже мои функции при открытие и закрытии,добавил так                  
          s = document.getElementById("myimg");
          s.style.visibility="hidden";
          noanim();
      }
     
      function anim(text) {                                      
        var u = text;
             k = document.getElementById("myimg");
             k.className = "div anim";
             k.innerHTML = " <b>Нажмите чтобы свернуть</b> <br> <hr>" + u;
      }
      function noanim() {                                         
          k = document.getElementById("myimg");
                 k.className = "div noanim";
                  k.innerHTML = " <b>Кликните дважды чтобы развернуть </b> <br> <hr> Содержимое...";       
          }
Обычный div
Привязка элемента к курсору

див который появляется после наведения
Привязка элемента к курсору

после двойного клика
Привязка элемента к курсору
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.07.2016, 20:04
Ответы с готовыми решениями:

Привязка элемента к определенному участку
Нужно чтобы один &lt;div&gt; при прокрутке всегда оставался в правом верхнем углу. Возможно ли такое?...

Привязка элемента к верху экрана
Здраствуйте, ув.форумчане! Как можно привязать например, хедер, кверху экрана при прокрутке, как...

Изменения Id элемента и привязка к событиям
Доброго времени суток, форумчане Есть некоторая форма, на которой имеется ссылка,...

Привязка к курсору
Помогите плиз!!!! 1) Необходимо привязать к курсору (фото во вложении). 2) Рисовать можно только...

1
$ su
1602 / 517 / 97
Регистрация: 18.11.2010
Сообщений: 2,807
Записей в блоге: 2
19.07.2016, 22:33 2
Посмотрите как раньше реализовывали drug'n'drop и вы все поймете.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.07.2016, 22:33

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Привязка объекта к курсору
Приветствую. Имеется юзер-контрол, состоящий из нескольких эллипсов, добавил его в основной грид в...

Привязка объекта к курсору
Как сделать чтобы объект (форма или изображение) двигались вслед за курсором, в его позиции

Привязка объекта к точке с одной стороны и к курсору с другой
Добрейшего всем времени суток! Помогите, пожалуйста, решить проблему! Нужно сделать так, чтобы...

Привязка элемента к данным
Доброго времени суток, столкнулся с проблемой и никак не могу разобраться как сделать все правильно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.