Позиционирование div над изображением динамически с помощью мыши

Я хочу отобразить div над изображением, чтобы верх div был выровнен с помощью курсора.
Когда курсор перемещается, необходимо также перемещать div (прямо сейчас только вертикально).
В IE (чистый javascript пожалуйста).Позиционирование div над изображением динамически с помощью мыши

<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #ToolTip{position:absolute; width: 200px;background-color:Lime; top: 0px; left: 0px; z-index:400;visibility:hidden;} 
    </style> 
    <script language="javascript" type="text/javascript"> 
     function On() { 

      MoveToolTip("ToolTip", "event.y", "event.x"); 
      document.getElementById('ToolTip').style.visibility = 'visible'; 

     } 
     function Off() { 

      MoveToolTip("ToolTip", 0, 0); 
      document.getElementById('ToolTip').style.visibility = 'hidden'; 
     } 

     function MoveToolTip(layerName, top, left) { 
       document.getElementById(layerName).style.top = (eval(top)); 
      //document.getElementById(layerName).style.left = (eval(left) - 360); 

     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip" >This is a test </div> 
     <a href="www.www.com"><img alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" onmouseout="Off();" onmouseover="On();" /></a> 

    </div> 
    </form> 
</body> 
</html>

источник

2009-12-24 kenny

Вот можно исправить для вашей проблемы:

<html> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
    #ToolTip { 
     position:absolute; 
     width: 200px; 
     background-color:Lime; 
     z-index:400; 
     visibility:hidden; 
     cursor: pointer; 
    } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip">This is a test</div> 
     <a href="www.www.com"> 
      <img alt="mg" id="base-img" border="0" src="http://www.google.com/logos/holiday09_4.gif" /> 
     </a> 
    </div> 
    </form> 
<script language="javascript" type="text/javascript"> 
    function showToolTip(e) { 
     e = e || window.event; // Older versions of IE handle events funny 
     // Added code that compensates for the window's scroll position. 
     var top = e.clientY + (window.pageYOffset || document.body.scrollTop) + 5; 
     moveToolTip("ToolTip", top, e.clientX); 
     document.getElementById('ToolTip').style.visibility = 'visible'; 

     // We need to cancel the center to ensure that the onmousemove event 
     // on the body element doesn't get triggered 
     e.cancelBubble = true; 
     if (e.stopPropagation) { e.stopPropagation(); } 
     return false; 
    } 
    function hideToolTip() { 
     moveToolTip("ToolTip", 0, 0); 
     document.getElementById('ToolTip').style.visibility = 'hidden'; 
     return false; 
    } 

    function moveToolTip(layerName, top, left) { 
     document.getElementById(layerName).style.top = (top + "px"); 
    } 

    document.onmousemove = hideToolTip; 
    document.getElementById("ToolTip").onmousemove = showToolTip; 
    document.getElementById("base-img").onmousemove = showToolTip; 
</script> 
</body> 
</html>

Что я изменил:

Дал функции более читаемыми именами:
- Переименован On в showToolTip
- Переименован Off в hideToolTip
event переменной теперь передается функции showToolTip. Это необходимо, чтобы получить х курсора, у позиции
Добавлена кода, который компенсирован позиция прокрутки окна
Добавлены return false в showToolTip и hideToolTip
Заменена onmouseout и onmouseover с более широко поддерживаются onmousemove события
Got избавиться от мерцания, добавив следующее:
- Занесено сообщение onmousemove, которое вызывает hideToolTip
- Добавлены onmousemove события кончика инструмента DIV, который вызывает showToolTip
Добавлены + "px" заявления в .style.top назначение. Некоторые браузеры запутываются, если назначить целое число стилю.
Перемещенные объявления сценариев в нижней части страницы.
Перемещены задание событий в Javascript и удалено onmousemove атрибутов из разметки
Добавлена cursor: pointer стиля в подсказку. Это удаляет мерцание курсора.
Изменен код формат

Я также написал рабочий пример: http://www.the-xavi.com/static/so-hover-div.html

Надеется, что это помогает.

источник

2009-12-24 15:54:59 Xavi

Это не перемещает div, когда я перемещаю курсор над изображением. – kenny

, а также document.body.scrollTop не работает, по крайней мере, не в IE8 – kenny

Я добавил к вашему решению onmousemove событие (подобное предложению Can Berk Güder) и изменил document.body.scrollTop на document.documentElement.scrollTop ; Теперь проблема мерцает – kenny

Вы можете легко достичь что-то вроде этого с помощью Jquery и плагин qTip

Edit: Проблема с яваскрипта кода является то, что вы не ссылки на фактические положения экрана в вашей функции перемещения, только текст. Вам нужно будет получить фактическое положение курсора в функции включения/выключения, как передать его как число в функцию перемещения.

источник

2009-12-24 15:29:22 Ariel

Я не хочу этого, чистый JS пожалуйста. – kenny

+1, если есть стабильный плагин для jQuery, который может справиться с этим, доказано, что он сэкономит много боли. –

Обновлена ссылка на qTipe (которая широко используется и очень хороша) и попыталась ответить на вопрос sans jQuery – Ariel

Возможно, вы захотите оптимизировать это, чтобы избежать мерцания.

<html> 
 
<head> 
 
<style type="text/css" media="screen"> 
 
#ToolTip { 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
\t padding: 5px; 
 
\t background-color: red; 
 
} 
 
</style> 
 
<script type="text/javascript" charset="utf-8"> 
 

 
function Move(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
} 
 

 
function On(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
\t document.getElementById("theImage").onmousemove = Move; 
 
\t document.getElementById("ToolTip").style.visibility = 'visible'; 
 
} 
 

 
function Off(e) { 
 
\t document.getElementById("theImage").onmousemove = null; 
 
\t document.getElementById("ToolTip").style.visibility = 'hidden'; 
 
} 
 

 
function MoveToolTip(layerName, x, y) { 
 
\t document.getElementById(layerName).style.left = x + 'px'; 
 
\t document.getElementById(layerName).style.top = y + 'px'; 
 
} 
 

 
function init() { 
 
\t document.getElementById("theImage").onmouseover = On; 
 
\t document.getElementById("theImage").onmouseout = Off; 
 
} 
 
</script> 
 
</head> 
 
<body onload="init();"> 
 
    <div> 
 
     <div id="ToolTip">This is a test</div> 
 
     <a href="www.www.com"><img id="theImage" alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" /></a> 
 
    </div> 
 
</body> 
 
</html>

источник

2009-12-24 15:44:21

Красиво сделано. Вы даже разделили проводку событий ... :) – Ariel

Что вы подразумеваете под оптимизацией? – kenny

Я получаю сообщение об ошибке (внутренняя функция включена): ошибка времени выполнения Microsoft JScript: «x» является нулевым или не является объектом – kenny

Позиционирование div над изображением динамически с помощью мыши

ответ

Смежные вопросы