通過鼠標懸停動態定位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功能。這需要得到光標的x，y位置，對窗口的滾動位置
新增return false到showToolTip和hideToolTip
替換onmouseout和onmouseover與更廣泛的支持onmousemove事件
得到補償
添加的代碼通過添加以下內容來消除閃爍：
- 添加了onmousemove事件到文檔，其中調用hideToolTip
- 新增onmousemove事件刀尖格，這就要求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 2009-12-24 16:03:33

也document.body.scrollTop不起作用，至少不在IE8中 – kenny 2009-12-24 16:22:46

我已經添加到您的解決方案onmousemove事件（類似於Can BerkGüder建議），並將document.body.scrollTop更改爲document.documentElement.scrollTop ;現在問題是閃爍 – kenny 2009-12-24 16:33:30

可以輕鬆實現像這樣使用jQuery和插件qTip

編輯：使用JavaScript代碼的問題是，你是不是在引用您的移動功能的實際屏幕位置，只是文字。您必須在開/關功能中獲取光標的實際位置，將其作爲數字傳遞給移動功能。

來源

2009-12-24 15:29:22 Ariel

我不想那個，請純粹的JS。 – kenny 2009-12-24 15:31:00

+1，如果有一個穩定的jQuery插件可以處理這個問題，它證明可以節省很多痛苦。 – 2009-12-24 15:31:57

更新了qTipe的鏈接（這是廣泛使用和很好），並試圖回答無問題jQuery – Ariel 2009-12-24 15:39:12

您可能想要優化此設置以避免閃爍。

<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 2009-12-24 15:50:51

你是什麼意思通過優化？ – kenny 2009-12-24 15:52:04

我得到一個錯誤（內函數On）：Microsoft JScript運行時錯誤：'x'爲空或不是對象 – kenny 2009-12-24 15:57:38

通過鼠標懸停動態定位div上方的圖像

回答

相關問題