SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Link overlay

  1. #1
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link overlay

    Like in the new google analytics, how do you create those overlays over a link?
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    What do you mean by link overlay?
    If you are talking about the mini popup elements that appear like tooltips when you mouse over, then it's probably easiest to use javascript.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    tooltips are easiest done just by adding title="tooltip text" to whatever tag you want it associated with.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Very true, but the display of the tooltips is all up to the browser vendors.. and I don't trust 'em one bit

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    All the popular browsers seem to handle plain text tooltips using title= okay (apart from IE generating titles on images if you specify alternate text and don't specify a title). Of course none of them can handle fancier tooltips and so for that you would use JavaScript knowing that those visitors who either have disabled javaScript for some reason or are using browsers/readers that don't support it will not see your fancy tooltip. For them you may want to have a title attribute and plain text that you strip out of the tag using JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, what I want is something like this:
    http://jedisthlm.com/wp-content/uplo...02/overlay.png

    (That's their old version of it... new version is better, but still.. the idea)
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Can you describe what it is you are after. That image just shows a web page that could be just ordinary HTML - there is nothing there that has any connection to anything I can think of that relates to the word 'overlay'.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Every single link in the page has certain information about it in a little box underneath them.

    The answer is javascript, you could use
    Code:
    getElementsByTagName('a');
    This would return an array of all the link elements in the page, it's not really straight forward, but then you need to build some elements using the DOM and insert them into the page. People in the javascript forum should be able to give you some ideas.

  9. #9
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    • Get an array of links in the page (document.links)
    • Get the X and Y coordinate of each link (see below)
    • Create a new div element
    • Set the div's position to absolute, X and Y offsets to those of the link
    • Set the div's innerHTML to whatever you want in the overlay
    • Append the div to the body element of the document


    Code:
    //Borrowed from beta.w3counter.com
    
    function findPosX(obj) {
        var curleft = 0;
        if (obj.offsetParent) {
            while (1) {
                curleft+=obj.offsetLeft;
                if (!obj.offsetParent) {
                    break;
                }
                obj=obj.offsetParent;
            }
        } else if (obj.x) {
            curleft+=obj.x;
        }
        return curleft;
    }
    
    function findPosY(obj) {
        var curtop = 0;
        if (obj.offsetParent) {
            while (1) {
                curtop+=obj.offsetTop;
                if (!obj.offsetParent) {
                    break;
                }
                obj=obj.offsetParent;
            }
        } else if (obj.y) {
            curtop+=obj.y;
        }
        return curtop;
    }
    It's all DOM manipulation, and you can always take a peek at Google's javascript files if you're curious.


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
  •