SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    nh
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image mouseover that follows cursor

    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. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    nh
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

    http://www.htmlgoodies.com/beyond/cs...le.php/3470391

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

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cleofus View Post
    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....

    http://www.htmlgoodies.com/beyond/cs...le.php/3470391

    when you scroll over the links that are double-underlined you see the tag pop up
    For a mouse-following popup that will display just an image (with an optional title), you can look at MagnifImage

    If you want interactive tooltips, try UltimaTips.

    Both use optimised positioning, to show the maximum area in restricted viewports.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    nh
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    these links are great, thanks mucho

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •