ansaurus

Question

Positioning div above image dynamically via mouseover

Answer 1

+1 A:

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.

Ariel 2009-12-24 15:29:22

I don't want that, pure JS please.

kenny 2009-12-24 15:31:00

+1, if there is a stable plugin for jQuery that can handle this, it's proven to save a lot of pain.

Igor Zinov'yev 2009-12-24 15:31:57

Updated link to qTipe (which is widely used and is pretty good) and tried to answer the question sans jQuery

Ariel 2009-12-24 15:39:12

Answer 2

+1 A:

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.com"><img id="theImage" alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" /></a>
    </div>
</body>
</html>

Can Berk Güder 2009-12-24 15:44:21

Nicely done. You even separated event wiring... :)

Ariel 2009-12-24 15:50:51

what do you mean by optimizing?

kenny 2009-12-24 15:52:04

I get an error (inside function On): Microsoft JScript runtime error: 'x' is null or not an object

kenny 2009-12-24 15:57:38

first step would be to reduce the number of document.getElementById calls. also, MoveToolTip can be made inline.I can't test this on IE, so I don't know what causes that error, but this is pure JS, it should work on all browsers?

Can Berk Güder 2009-12-24 16:00:15

There is some problem with event passing, function On(e) e is empty.

kenny 2009-12-24 16:06:51

Answer 3

+1 A:

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.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>

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 compensated 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.com/static/so-hover-div.html

Hope this helps.

Xavi 2009-12-24 15:54:59

This doesn't move div as I move the cursor above image.

kenny 2009-12-24 16:03:33

and also document.body.scrollTop doesn't work, at least not in IE8

kenny 2009-12-24 16:22:46

I've added to your solution onmousemove event (similar to Can Berk Güder suggestion), and changed document.body.scrollTop to document.documentElement.scrollTop; Now the problem is flicker

kenny 2009-12-24 16:33:30

hmm, I saw none of those problems when I did testing on my end. Give me a second I'll re-write the code to make it much more robust.

Xavi 2009-12-24 16:46:20

I posted a more robust version of the code, let me know if you're still having problems with it.

Xavi 2009-12-24 17:11:17

Well...this is a PERFECT answer!

kenny 2009-12-24 18:55:41

ansaurus

tags:

views:

answers:

Positioning div above image dynamically via mouseover

related questions