Как создать <DIV> рядом с курсором?
Необходимо с помощью javascript как можно проще создать <DIV>text</DIV> рядом с курсором, который следовал бы за ним.
Получить координаты курсора можно например через clientX/clientY или pageX/pageY. Дам толчок... Допустим при наведении на ссылку (onmouseover) див появляется по координатам курсора: x = clientX + 20; y = clientY + 20;и исчезает после убирания курсора с ссылки (onmouseout) А как нарисовать сам див? |
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 Рекомендую изучить основы языка |
Дружище, ты не представляешь, как выручаешь меня, я уже 2 ночи не сплю, а ты меня спас :thanks:
|
Появился другой вопрос. А как теперь удалить созданный див? А то я его создаю при наведении на ссылку, но нужно чтобы он еще и удалялся после отвода курсора со ссылки. Вот мой код:
<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>
|
<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>
|
Magneto,
Любопытно одно, почему это еще и работает... ведь дивак ты создаешь внутри функции havejpg причем не в глобальном пространстве. И при этом функция deleteDiv где-то его находит... странно однако. |
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) но там ее нету, поэтому нужно подниматься еще выше, а выше глобальная область видимости. Поэтому сколько у функции есть родительских функций, столько она и будет подниматься в поисках нужно переменной. Это очень похоже на всплытие событий. |
Magneto,
Я вкурсе как работает scope речь не об этом... речь о том что я не обратил внимания на то что функция deleteDiv находиться внутри havejpg... Вот щас внимательнее посмотрел и увидел... Сорри, моя невнимательность породила мой вопрос. |
А можно как-нибудь сделать, чтобы div еще и следовал за курсором? Навожу на ссылку, появляется, но если водить по ссылке, он остается на месте, а нужно сделать чтобы и двигался тоже.
В идеале будет даже сделать это условие опционально. Что-то вроде:
function check()
{
if checkbox.checked = true {следовать за курсором}
else {не следовать, но все равно появляться}
}
|
| Часовой пояс GMT +3, время: 17:51. |