Image mouseover that follows cursor

JavaScript
1

hi all-

I need a ‘Floating’ layer that appears on mouseover on link and follows cursor

Tons of flash sites now have links that, when you put your cursor anywhere on the link, a div/span/layer pops up right there with an image. The layer then follows the mouse until it is taken off of the link. I was wondering if there is a similar way to do this in html

How do you do this?

Essentially i have a page that has a ton of small logos that make it look like a billboard. i would like to hide these, then give the user a “roll over this link” option where the logo will appear as long as the mouse is over the text link, then disappears when they roll out.

any help or suggestions would be much appreciated.

2

I’ve had a play around and come up with this.

I’ve set it so everything that has the class testClass will be effected.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css">
            .Box {
                position: absolute;
                top: 0;
                left: 0;
                border: solid 1px;
                background-color: #fff;
                padding: 5px;
            }
        </style>
        <script type="text/javascript">
            function setup() {
                var el = getElementsByClassName('testClass');
                for(var i = 0; i < el.length; i++) {
                
                    var box = document.getElementById(el[i].id + '_box');
                        box.style.display = 'none';

                    el[i].onmouseover = function(e) {
                        var mousePos = getMouseLocation(e);

                        var box = document.getElementById(this.id + '_box');
                        box.style.display = 'block';
                        box.style.top = (mousePos[1]) + 'px';
                        box.style.left = (mousePos[0]+20) + 'px';
                    };
                    el[i].onmousemove = function(e) {                        
                        var mousePos = getMouseLocation(e);

                        var box = document.getElementById(this.id + '_box');
                        box.style.top = (mousePos[1]) + 'px';
                        box.style.left = (mousePos[0]+20) + 'px';
                    };
                    el[i].onmouseout = function() {
                        var box = document.getElementById(this.id + '_box');
                        box.style.display = 'none';
                    };
                }
            }

            function getMouseLocation(e) {
                if (!e) var e = window.event;
                if (e.pageX || e.pageY) {
                    posx = e.pageX;
                    posy = e.pageY;
                }
                else if (e.clientX || e.clientY) {
                    posx = e.clientX + document.body.scrollLeft    + document.documentElement.scrollLeft;
                    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
                return new Array(posx, posy);
            }
            window.onload = setup;
            
            function getElementsByClassName(className, tag, elm){
                var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
                var tag = tag || "*";
                var elm = elm || document;
                var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
                var returnElements = [];
                var current;
                var length = elements.length;
                for(var i=0; i<length; i++){
                    current = elements[i];
                    if(testClass.test(current.className)){
                        returnElements.push(current);
                    }
                }
                return returnElements;
            }
        </script>
    </head>
    <body>
        
        <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" alt="Google" title="Google" class="testClass" id="test1" />
        <div id="test1_box" class="Box">This is googles test box</a></div>
        <br /><br />
        <a href="#" class="testClass" id="test2">This is a test</a>
        <div id="test2_box" class="Box">Text based</a></div>
        <br /><br />

    </body>
</html>
3

wow this is great, love the postioning relative to the cursor…thanks. is there a way to make the box an image, rather than text based?

i was looking for something similar to what appears on this page…

when you scroll over the links that are double-underlined you see the tag pop up

4

For a mouse-following popup that will display just an image (with an optional title), you can look at [B][COLOR=“SeaGreen”]MagnifImage[/COLOR][/B]

If you want interactive tooltips, try [B][COLOR=“SeaGreen”]UltimaTips[/COLOR][/B].

Both use optimised positioning, to show the maximum area in restricted viewports.

5

these links are great, thanks mucho

6

You can put what ever you want into the Div that contains the text, its the DIV its self that the script is interested in.