SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JS Floating Alt Tag Boxes or Similar?

    Hi,

    I'm creating a new section that requires help files. I was thinking that instead of doing loads of help files I could just have Alt Tags that pop up when the cursor goes over a particular image/link and explains what that image/link represents.

    Would anyone know the code to do this?

    A normal Alt Tag is too boring. It would be ideal if the user rolled the cursor over a link - a pop up box appears describing what that link represents - doesn't disappear when the cursor moves, but the user has to close it (making this pop up box look pretty would be good as well). An example would be good too.

    I've seen JS alt tags that can be coloured and stuff, but I want a little more than that if possible.

    Any other advice about adding help facilities to pages would be appreciated as well.

    Cheers.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys, you've hit the nail on the head.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a little X Tooltips Demo I threw together. Tested quickly on Win98 with Opera7.11, Firebird0.6.1, and IE6.0.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>X Tooltips Demo</title>
    <style type='text/css'>
    html {margin:0; padding:0;}
    body {
      color:#000; background:#fff;
      margin:0; padding:10px;
      font-family:verdana,arial,sans-serif; font-size:12px;
    }
    a {
      color:#800; background:transparent; text-decoration:underline;
    }
    a:hover {
      color:#008; background:#ccc; text-decoration:none;
    }
    h1 {
      color:#008; background:#ccf;
      margin:0 0 1em 0; padding:.25em; font-size:18px;
    }
    h2 {
      color:#008; background:transparent;
      margin:1.5em 0 1em 0; padding:.5em 0; font-size:14px;
    }
    #xTooltip {
      position:absolute; visibility:hidden;
    }
    .tip1 {
      position:relative; overflow:hidden; width:auto; height:auto;
      border-bottom:1px dashed #ccc;
    }
    .tip2 {
      position:relative; overflow:hidden; width:auto; height:auto;
      border-bottom:1px dashed #ccf;
    }
    .tip3 {
      position:relative; overflow:hidden; width:auto; height:auto;
    }
    .xtip1 {
      position:absolute; visibility:hidden; overflow:hidden;
      color:#000; background:#ccc; border:1px solid #666;
      font-size:10px; margin:0; padding:1px;
      width:auto; height:auto;
    }
    .xtip2 {
      position:absolute; visibility:hidden; overflow:hidden;
      color:#008; background:#ccf; border:1px solid #008;
      font-size:10px; margin:0; padding:1px;
      width:auto; height:auto;
    }
    .xtip3 {
      position:absolute; visibility:hidden; overflow:hidden;
      color:#800; background:#fcc; border:1px solid #800;
      font-size:10px; margin:0; padding:1px;
      width:auto; height:auto;
    }
    </style>
    <script type='text/javascript' src='../x.js'></script>
    <script type='text/javascript' src='../x_util.js'></script>
    <script type='text/javascript'>
    window.onload = function() {
      xInitTooltips(3);
    }
    function xInitTooltips(n) {
      var i, j, tips;
      for (i = 1; i <= n; ++i) {
        tips = xGetElementsByClassName('tip' + i);
        for (j = 0; j < tips.length; ++j) {
          tips[j].isTip = true;
          xAddEventListener(tips[j], 'mouseover', xttOnMouseover, false);
        }
      }
      xAddEventListener(document, 'mousemove', xttOnMousemove, false);
    }
    function xttOnMouseover(e) {
      var evnt = new xEvent(e);
      var ele = evnt.target;
      var tt = xGetElementById('xTooltip');
      tt.className = 'x' + ele.className;
      tt.innerHTML = ele.getAttribute('title');
      xMoveTo(tt, -200, xPageY(ele) - xHeight(tt) - 2);
      xShow(tt);
      xSlideTo(tt, xPageX(ele), xPageY(ele) - xHeight(tt) - 2, 250);
    }
    function xttOnMousemove(e) {
      var evnt = new xEvent(e);
      var ele = evnt.target;
      if (!ele || !ele.isTip) {
        xHide('xTooltip');
      }
    }
    </script>
    </head>
    <body>
    
    <h1>X Tooltips Demo</h1>
    
    <h2>Sed ut perspiciatis...</h2>
    <p><span class='tip1' title='But I must explain'>Sed ut perspiciatis</span> unde omnis iste ... </p>
    <h2>But I must explain...</h2>
    <p><span class='tip2' title='Sed ut perspiciatis'>But I must explain</span> to you how all ... </p>
    <h2>At vero eos et...</h2>
    <p><span class='tip1' title='On the other hand'>At vero eos et</span> accusamus et iusto ... </p>
    <h2>On the other hand...</h2>
    <p><span class='tip2' title='At vero eos et'>On the other hand</span>, we denounce with ... </p>
    <h2>Home...</h2>
    <p><a class='tip3' href="http://cross-browser.com/" title="Cross-Browser DHTML">Cross-Browser.com</a></p>
    
    <div id='xTooltip'></div>
    
    </body>
    </html>


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
  •