javascript - Positioning div above image dynamically via mouseover

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>

Share Improve this question edited Dec 24, 2009 at 15:34 asked Dec 24, 2009 at 15:24 kenny 2,0406 gold badges29 silver badges39 bronze badges

Add a ment |

3 Answers 3

Sorted by: 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Positioning div above image dynamically via mouseover - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)