Div, всплывающий под курсором.

@Restel · Регистрация: 28.04.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте. Прошу помочь в следующем.

У меня на странице есть несколько картинок, при нажатии на которые всплывает div. Скрипт взят отсюда: http://flowplayer.org/tools/de... index.html

Дивы всплывают по центру экрана, а мне нужно, чтобы их левый верхний или правый верхний уголки оказывались точно под курсором. Конкретные координаты задать нельзя, так как все должно корректно отображаться на всех разрешениях экрана.

@ostgals · 30.04.2010, 10:34

Покажите хотя бы фрагмент кода.
Неужели вы думаете, что помогающие захотят писать html с нуля, чтобы воспроизвести проблему?

@Restel · 30.04.2010, 10:41 **[ТС]**

По ссылке, что я привела, есть даже не фрагмент, а вообще все, что необходимо для "воспроизведения проблемы".

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

@ostgals · 30.04.2010, 11:21

Как работает на сайте автора - я и так прекрасно вижу.
Мне интересно было посмотреть ваш код, чтобы взглянуть как вы прикрутили это к своему сайту.

С таким подходом можно поискать другое решение - более подходящее под ваши запросы. Их в Интернете не просто много, а очень много.

Например, всплывающие подсказки от Yens'а (процесс создания описан здесь).

@Restel · 30.04.2010, 11:25 **[ТС]**

Я имела в виду не всплывающую подсказку, а подсказку решения с вашей стороны.
Прикручено у меня все точно так же.

За ссылку спасибо, пригодится.

@ostgals · 30.04.2010, 13:27

Отловить координаты мыши в момент щелчка просто - следует лишь отловить в событии click объект Event. В нем есть параметры pageX и pageY - абсолютные координаты мыши, относительно начала координат всей страницы.

Проблема в другом: этот плагин в силу своего устройства не позволяет подсунуть скрипту координаты мыши - координаты рассчитываются заранее, сразу после загрузки страницы.

На сайте, что я вам давал, есть еще один пример - на этот раз именно всплывающего окна. Этот пример уже можно приспособить под свои нужды, в том числе и подсовывать ему какие угодно координаты.

Попробуйте. Если возникнут проблемы, пишите - разберемся.

@Restel · 30.04.2010, 16:26 **[ТС]**

Повозилась с этим всплывающим окном. В IE и Опере все нормально, а в Firefox'e немного глючит.

В файл popup.js вставила следующее:

Javascript

isOpera=isOpera5=window.opera&&amp;isDOM; //Opera 5+
isMSIE=document.all&&document.all.item&&!isOpera; //MSIE 4+
isMozilla=navigator.appName=="Netscape"; //Mozilla
var mousex = 0;
var mousey = 0;

Функция centerPopup() теперь выглядит так:

Javascript

function centerPopup(){
if (isMSIE || isOpera){
 
mousex = event.clientX + document.body.scrollLeft;
mousey = event.clientY + document.body.scrollTop;
 
 
}
 
else if (isMozilla){
document.onmousemove=function(e){
mousex = e.pageX;
mousey = e.pageY;
 
return true; 
}}
 
    $("#popupContact").css({
        "position": "absolute",
        "top": mousey,
        "left": mousex
    });
    //only need force for IE6
    
}

В Firefox'e, при первом нажатии на кнопку, возвращаются нули, а при втором нажатии - уже нужные координаты. В чем тут проблема?

@ostgals · 30.04.2010, 21:48

С ФФ все ясно.
При первом вызове обработчик только назначается событию onmousemove:

Javascript

...
else if (isMozilla){
document.onmousemove=function(e){
mousex = e.pageX;
mousey = e.pageY;
 
return true; 
}}

А срабатывает он только после второго вызова.
Так и должно быть - такова запрограммированная логика.

Я взял архив с примером с этого сайта и самую малость его изменил. Проверил: работает и в ФФ, и в О10 и в IE8.
Обратите внимание на новый обработчик click и на новую функцию placePopup(x, y).
Выкладываю в приложениях свой вариант.

@Restel · 05.05.2010, 11:02 **[ТС]**

Решила я все-таки сделать как всплывающие подсказки. Так как картинок много, а содержимое самих подсказок будет время от времени меняться.

У меня подсказки всплывают по клику, а закрываться должны при нажатии на див класса win_close. Пытаюсь для этого как-то исправить здесь

Javascript

1
2
3

$(this).mouseout(function(){
tipBoxHide();
});

но ничего не получается...

Добавлено через 25 минут
Все исправила, все работает, спасибо =)))

@Restel 33 / 36 / 2 Регистрация: 28.04.2010 Сообщений: 571
		1
	Div, всплывающий под курсором. 30.04.2010, 09:09. Показов 8642. Ответов 8 Метки нет (Все метки) Здравствуйте. Прошу помочь в следующем. У меня на странице есть несколько картинок, при нажатии на которые всплывает div. Скрипт взят отсюда: http://flowplayer.org/tools/de... index.html Дивы всплывают по центру экрана, а мне нужно, чтобы их левый верхний или правый верхний уголки оказывались точно под курсором. Конкретные координаты задать нельзя, так как все должно корректно отображаться на всех разрешениях экрана. 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	30.04.2010, 10:34	2
	Покажите хотя бы фрагмент кода. Неужели вы думаете, что помогающие захотят писать html с нуля, чтобы воспроизвести проблему? 0

@Restel 33 / 36 / 2 Регистрация: 28.04.2010 Сообщений: 571
	30.04.2010, 10:41 [ТС]	3
	По ссылке, что я привела, есть даже не фрагмент, а вообще все, что необходимо для "воспроизведения проблемы". Мне нужна подсказка, как координаты положения курсора передать в стиль самого дива, например. Пока вижу только такой вариант решения. 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	30.04.2010, 11:21	4
	Как работает на сайте автора - я и так прекрасно вижу. Мне интересно было посмотреть ваш код, чтобы взглянуть как вы прикрутили это к своему сайту. С таким подходом можно поискать другое решение - более подходящее под ваши запросы. Их в Интернете не просто много, а очень много. Например, всплывающие подсказки от Yens'а (процесс создания описан здесь). 1

@Restel 33 / 36 / 2 Регистрация: 28.04.2010 Сообщений: 571
	30.04.2010, 11:25 [ТС]	5
	Я имела в виду не всплывающую подсказку, а подсказку решения с вашей стороны. Прикручено у меня все точно так же. За ссылку спасибо, пригодится. 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	30.04.2010, 13:27	6
	Отловить координаты мыши в момент щелчка просто - следует лишь отловить в событии click объект Event. В нем есть параметры pageX и pageY - абсолютные координаты мыши, относительно начала координат всей страницы. Проблема в другом: этот плагин в силу своего устройства не позволяет подсунуть скрипту координаты мыши - координаты рассчитываются заранее, сразу после загрузки страницы. На сайте, что я вам давал, есть еще один пример - на этот раз именно всплывающего окна. Этот пример уже можно приспособить под свои нужды, в том числе и подсовывать ему какие угодно координаты. Попробуйте. Если возникнут проблемы, пишите - разберемся. 0

	05.05.2010, 11:02