Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2011, 22:50
Интересующийся
Отправить личное сообщение для Kanzaki Посмотреть профиль Найти все сообщения от Kanzaki
 
Регистрация: 02.09.2011
Сообщений: 18

Как создать <DIV> рядом с курсором?
Необходимо с помощью javascript как можно проще создать <DIV>text</DIV> рядом с курсором, который следовал бы за ним.
Получить координаты курсора можно например через clientX/clientY или pageX/pageY.
Дам толчок... Допустим при наведении на ссылку (onmouseover) див появляется по координатам курсора:
x = clientX + 20;
y = clientY + 20;
и исчезает после убирания курсора с ссылки (onmouseout)
А как нарисовать сам див?
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2011, 23:15
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

var div = document.createElement('div');

div.style.position = 'absolute';
div.style.left = x;   // Координаты дива X и Y не забываем указать еденицы измерения,
div.style.top = y;    // например 40px или 20%
div.style.background = 'red';   //  Див с красной заливкой ))
div.appendChild(document.createTextNode('Я обычный текст'));  //  Добавим текст в див

document.body.appendChild(div);   //  Добавим наш див на страницу


DOM: работа с HTML-страницей
Координаты элемента на странице
Основы javascript

Рекомендую изучить основы языка
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2011, 23:18
Интересующийся
Отправить личное сообщение для Kanzaki Посмотреть профиль Найти все сообщения от Kanzaki
 
Регистрация: 02.09.2011
Сообщений: 18

Дружище, ты не представляешь, как выручаешь меня, я уже 2 ночи не сплю, а ты меня спас
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2011, 01:15
Интересующийся
Отправить личное сообщение для Kanzaki Посмотреть профиль Найти все сообщения от Kanzaki
 
Регистрация: 02.09.2011
Сообщений: 18

Появился другой вопрос. А как теперь удалить созданный див? А то я его создаю при наведении на ссылку, но нужно чтобы он еще и удалялся после отвода курсора со ссылки. Вот мой код:
<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var arayLink = document.getElementsByTagName('a'),
      totalLink = arayLink.length;

  while (totalLink--) {
    arayLink[totalLink].addEventListener('mouseover', havejpg, false);
  }

  function havejpg (e) {
    var div = document.createElement('div'); 
    if (e.target.href.match(/jpg$/)) {	//Проверяем, что в имени файла по ссылке расширение .jpg 
    //  alert('Ссылка содержит буквы jpg'); 
	x = e.clientX;
    y = e.clientY;
	div.style.position = 'absolute';
	div.style.left = x + 20;   // Координаты дива X и Y не забываем указать еденицы измерения,
	div.style.top = y + 20;    // например 40px или 20%
	div.style.background = 'green';   //  Див с зеленой заливкой ))
	div.appendChild(document.createTextNode('Я обычный текст'));  //  Добавим текст в див
	document.body.appendChild(div);
    }
//    else {
//      alert('Ссылка не содержит буквы jpg'); 
//    }
  }
    
}
</script>
</head>
<body>
<a href="img.jpg"> Ссылка 1 </a><br />
<a href="my.txt"> Ссылка 2 </a><br />
<a href="here.mp3"> Ссылка 3 </a><br />
<a href="you.jpg"> Ссылка 4 </a><br />
<a href="i.png"> Ссылка 5 </a><br />
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2011, 01:45
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var arayLink = document.getElementsByTagName('a'),
      totalLink = arayLink.length;

  while (totalLink--) {
    arayLink[totalLink].addEventListener('mouseover', havejpg, false);
  }

  function havejpg (e) {
    var div = document.createElement('div'); 
    if (e.target.href.match(/jpg$/)) {	//Проверяем, что в имени файла по ссылке расширение .jpg 
    //  alert('Ссылка содержит буквы jpg'); 
	x = e.clientX;
    y = e.clientY;
	div.style.position = 'absolute';
	div.style.left = x + 20;   // Координаты дива X и Y не забываем указать еденицы измерения,
	div.style.top = y + 20;    // например 40px или 20%
	div.style.background = 'green';   //  Див с зеленой заливкой ))
	div.appendChild(document.createTextNode('Я обычный текст'));  //  Добавим текст в див
	document.body.appendChild(div);

  //  Функция удаляет новый див
  function deleteDiv () {
    document.body.removeChild(div);   // Удаление дива
    //  Удаляем обработчик события "уход курсора с элемента" текущей ссылки
    e.target.removeEventListener('mouseout', deleteDiv, false);
  }
  //  Добавим обработчик события "уход курсора с элемента" текущей ссылки, будет вызвана функцыя deleteDiv 
  e.target.addEventListener('mouseout', deleteDiv, false);

    }
//    else {
//      alert('Ссылка не содержит буквы jpg'); 
//    }
  }
    
}
</script>
</head>
<body>
<a href="img.jpg"> Ссылка 1 </a><br />
<a href="my.txt"> Ссылка 2 </a><br />
<a href="here.mp3"> Ссылка 3 </a><br />
<a href="you.jpg"> Ссылка 4 </a><br />
<a href="i.png"> Ссылка 5 </a><br />
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2011, 10:24
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Magneto,
Любопытно одно, почему это еще и работает... ведь дивак ты создаешь внутри функции havejpg причем не в глобальном пространстве. И при этом функция deleteDiv где-то его находит... странно однако.
Ответить с цитированием
  #7 (permalink)  
Старый 03.09.2011, 11:16
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

devote Может показаться что функции работают следующим образом, когда функции нужно сделать
чтото с переменной то она попробует найти эту переменную внутри себя, внутри своей области видимости
и если она не находит нужную переменную то она обращается к глобальной области видимости. Но это не так.

На самом деле функции при поиске нужных переменных просто поднимаются вверх по областям видимости
родительских функций (ох загнул )

К примеру код:

var a = 'Я глобальная переменная A';
var b = 'Я глобальная переменная B';

function first () {
  var a = 'Я переменная A обьявленная в функции first';
  
  function second () {
	alert(a);
	alert(b);
  }
  second();
}
first();


При запуске функции second первому алерту нужна переменная А но ее нету внутри функции, поэтому функция
попробует найти эту переменную в родительской функции, тоесть в функции first. Здесь эта переменная есть.
А при запуске второго алерта функция попробует найти переменную B в родительской функции(first) но там ее нету,
поэтому нужно подниматься еще выше, а выше глобальная область видимости.

Поэтому сколько у функции есть родительских функций, столько она и будет подниматься в поисках нужно переменной.
Это очень похоже на всплытие событий.
Ответить с цитированием
  #8 (permalink)  
Старый 03.09.2011, 11:30
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Magneto,
Я вкурсе как работает scope речь не об этом... речь о том что я не обратил внимания на то что функция deleteDiv находиться внутри havejpg... Вот щас внимательнее посмотрел и увидел... Сорри, моя невнимательность породила мой вопрос.
Ответить с цитированием
  #9 (permalink)  
Старый 03.09.2011, 14:23
Интересующийся
Отправить личное сообщение для Kanzaki Посмотреть профиль Найти все сообщения от Kanzaki
 
Регистрация: 02.09.2011
Сообщений: 18

А можно как-нибудь сделать, чтобы div еще и следовал за курсором? Навожу на ссылку, появляется, но если водить по ссылке, он остается на месте, а нужно сделать чтобы и двигался тоже.
В идеале будет даже сделать это условие опционально. Что-то вроде:
function check()
{
if checkbox.checked = true {следовать за курсором}
else {не следовать, но все равно появляться}
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как динамически создать группу Checkbox с определенными заранее значениями? Wexi Элементы интерфейса 2 23.01.2013 09:22
Как создать проверку вводимого пароля на стойкость, используя API Google. Александр Черепов Элементы интерфейса 4 03.11.2008 02:16
Как создать окно, определенной ширины и высоты AnIva Events/DOM/Window 2 17.09.2008 09:17
Как создать событие? remitmaster Общие вопросы Javascript 9 26.07.2008 18:31
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 16:15