onmousemove не отлавливается
есть скрипт:
<script type="text/javascript">
function moveTip(e)
{
//alert('a');
if(!e) e=window.event;
//else
/*else
{
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
alert(an+av+acn+ua);
}*/
//alert(e.target);
floatTipStyle = document.getElementById("floatTip").style;
w = 250; // Ширина слоя
// Для браузера IE
var IE='\v'=='v';
if (document.all) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
// Для остальных браузеров
} else {
x = e.pageX;
y = e.pageY;
}
if ((x + w + 10) < document.body.clientWidth) {
floatTipStyle.left = x + 'px';
} else
{
floatTipStyle.left = x - w + 'px';
}
floatTipStyle.top = y + 20 + 'px';
}
function toolTip(msg) {
alert('a');
floatTipStyle = document.getElementById("floatTip").style;
if (msg) {
document.getElementById("floatTip").innerHTML = msg;
floatTipStyle.display = "block";
} else {
floatTipStyle.display = "none";
}
}
</script>
вот использование:
<img src="images/odel.jpg" alt="Фотография" width="300" height="450"
onmouseover="toolTip('текст')" onmouseout="toolTip()" onmousemove = "moveTip(e) " />
<div id="floatTip"></div>
и идентификатор:
#floatTip
{
position: absolute; width: 250px; display: none;
border: 1px solid #000; padding: 5px;
font-family: sans-serif; font-size: 9pt;
color: #931; background: red;
opacity: 0.85;
left:0;
}
Задача: должно реализовываться движение за курсором мыши (при навидении на картинку) блока div, описанного #floatTip тут. Как только курсор вышел за границу, блок около курсора должен исчезнуть. Скрипт в принципе рабочий, проверял просто когда в документе 1 div. Но в моей ситаации наблюдается большая вложенность дивов (контент и тд). Вот почему то при этой вложенности onmouseover, onmouseout отлавилаются, но выводится див блок только под изображение, а мне надо чтоб за курсором выводился блок без остановки, а mousemove не ловится. Подскажите че делать? заранее спасибо. |
haxoid,
Попробуйте добавить z-index
#floatTip
{
position: absolute; width: 250px; display: none;
border: 1px solid #000; padding: 5px;
font-family: sans-serif; font-size: 9pt;
color: #931; background: red;
opacity: 0.85;
z-index:2000;
left:0;
}
|
И второе - Нет такого объекта document.getElementById("floatTip").style
В Переменную вдалбливаете floatTipStyle = document.getElementById("floatTip") А для задания свойств floatTipStyle.style.left = ... floatTipStyle.style.top = ... |
к сожалению никаких изменений. Есть еще варианты?
|
Цитата:
|
повесил на боди - ноль реакции. Из за чего такое может быть?
|
Цитата:
Напишите в стилях body {height:100%} для ие надо e.x а не event.x в таких случаях всегда проблема что курсор то на картинке будет то на див попадет-поэтому див надо ниже курсора пикселов на 20 |
Цитата:
Сущий бред |
остальные события работают в том то и дело! даже для того же дива, события onmouseover, onmouseout работают даже из боди. Движение курсора просто не отлавливается. Алерты не выводятся. Магия.
|
Цитата:
function moveTip(e)
{alert(0)}
<body onmousemove=moveTip(event)> |
о стал алерт выводится, но блок див все так же выводится не в положении курсора и не двигается за ним а ниже картинки блок выводится
|
Цитата:
то есть Вы его куда то внутрь засунули html код внимательно посмотрите этот див лучше скриптом делать
var d=document.createElement('div');
d.id='floatTip';
document.body.appendChild(d);
|
ну да, у меня в скрипте document.onmousemove = moveTip;
это значит что область видимости его - весь html? но почему то он до вложенного дива добраться не может, хотя onmouseout, onmouseover находит |
Цитата:
вложенный что ли? он не должен быть вложенным |
был вложен. Теперь не вложен. Перенес его в боди самым первым
<body > <div id="floatTip" ></div> результата нет-все равно на движение нет реакции, только на onmouseout, onmouseover и выводится блок теперь в хидере. |
я вот так обычно делаю
<!DOCTYPE html>
<html>
<head>
<style>
#floatTip
{
position: absolute; width: 250px;
display: none; border: 1px solid #000; padding: 5px;
font-family: sans-serif; font-size:9pt;color: #931;
background: red;opacity: 0.85;
z-index:2000;left:0;
}</style>
<script>
var pr=0;
function f(){pr=1};
function f1(){pr=0;var f=document.getElementById('floatTip');f.style.display='none';};
function f3(e){if(pr!=1)return;
var f=document.getElementById('floatTip');f.style.display='block';
f.style.top=(e.pageY+10)+'px';
f.style.left=(e.pageX-125)+'px';
};
</script>
<body onmousemove=f3(event)>
<div id='floatTip'
></div><img width=200 onmouseover=f(event) onmouseout=f1(event) src='http://all-html5.narod.ru/2/1.jpg'>
|
Цитата:
|
а разве есть разница в именах переменных? или должно на вход именно имя event подаваться?
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:00. |