admin管理员组

文章数量:1419648

I want to display div above image so that div's top is aligned with cursor.
As cursor is moved, the div should be moved as well (right now just vertically).
In IE (pure javascript please).

<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"><img alt="mg" border="0" src=".gif"  onmouseout="Off();" onmouseover="On();" /></a>

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

I want to display div above image so that div's top is aligned with cursor.
As cursor is moved, the div should be moved as well (right now just vertically).
In IE (pure javascript please).

<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."><img alt="mg" border="0" src="http://www.google./logos/holiday09_4.gif"  onmouseout="Off();" onmouseover="On();" /></a>

    </div>
    </form>
</body>
</html>
  • javascript
Share Improve this question edited Dec 24, 2009 at 15:34 kenny asked Dec 24, 2009 at 15:24 kennykenny 2,0406 gold badges29 silver badges39 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Here's a possible fix for your problem:

<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.">
            <img alt="mg" id="base-img" border="0" src="http://www.google./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 pensates 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>

Things I changed:

  • Gave functions more readable names:
    • Renamed On to showToolTip
    • Renamed Off to hideToolTip
  • The event variable is now passed to the showToolTip function. This is needed to get the cursor's x, y position
  • Added code that pensated for the window's scroll position
  • Added return false to showToolTip and hideToolTip
  • Replaced onmouseout and onmouseover with the more widely supported onmousemove event
  • Got rid of the flicker by adding the following:
    • Added onmousemove event to document, which calls hideToolTip
    • Added onmousemove event to the tool tip div, which calls showToolTip
  • Added + "px" statement to the .style.top assignment. Some browsers get confuse if you assign an integer to a style.
  • Moved script declarations to the bottom of the page.
  • Moved event assignments to javascript and removed onmousemove attributes from the markup
  • Added the cursor: pointer style to the tool tip. This removes cursor flicker.
  • Changed code format

I've also posted a working example: http://www.the-xavi./static/so-hover-div.html

Hope this helps.

You can easily achieve something like this using jQuery and the plugin qTip

Edit: The problem with the javascript code is that you are not referencing actual screen positions in your move function, just text. You'll have to get the actual position of the cursor in the on/off function as pass it as a number to the move function.

You might want to optimize this to avoid flickering.

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

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

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

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

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

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

本文标签： javascriptPositioning div above image dynamically via mouseoverStack Overflow

版权声明：本文标题：javascript - Positioning div above image dynamically via mouseover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745313851a2653059.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。