Mouseover box?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Pocky
    New Member
    • Feb 2008
    • 3

    Mouseover box?

    Hello.
    Does anyone know a javascript for making a little textbox appear when you mouseover a link/image?
    I made an example:
    http://i26.photobucket .com/albums/c104/World-of-nina/mouseover.png
    I really need it, but i suck at scripts D:
    Thanks ~
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    hi ...

    here is an example:

    [CODE=html]<script type="text/javascript">
    function ttip(e, node, state) {
    var x = e.clientX;
    var y = e.clientY;
    var id = node.id + '_ttip';

    if (state) {
    var ttip = document.create Element('span') ;
    ttip.id = id;
    ttip.innerHTML = 'test tip';

    ttip.style.posi tion = 'absolute';
    ttip.style.top = parseInt(y, 10) - 5 + 'px';
    ttip.style.left = parseInt(x, 10) + 5 + 'px';
    ttip.style.bord er = '1px solid red';
    ttip.style.colo r = 'red';

    ttip.style.back groundColor = 'lightyellow';

    node.parentNode .appendChild(tt ip);
    } else {
    var n = document.getEle mentById(id);

    if (n != null) {
    node.parentNode .removeChild(n) ;
    }
    }
    }
    </script>

    <div id="my_div" onmouseover="tt ip(event, this, true);" onmouseout="tti p(event, this, false);">test</div>
    [/CODE]
    kind regards

    Comment

    • hdanw
      New Member
      • Feb 2008
      • 61

      #3
      this worx 2.

      [html]
      <html>
      <head>
      <script type="text/javascript">
      var p=window.create Popup();
      var pbody=p.documen t.body;
      pbody.style.bac kgroundColor="l ime";
      pbody.style.bor der="solid black 1px";
      pbody.innerHTML ="This is a pop-up!";
      function show_popup()
      {
      p.show(150,150, 200,50,document .body);
      }
      function killpoopup()
      {
      p.hide();
      }
      </script>
      </head>

      <body>
      <a href="_blank" onmouseover="sh ow_popup()" onmouseout="kil lpoopup()">Show pop-up!</a>
      </body>

      </html>

      [/html]

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        Originally posted by hdanw
        this worx 2.

        [html]
        <html>
        <head>
        <script type="text/javascript">
        var p=window.create Popup();
        var pbody=p.documen t.body;
        pbody.style.bac kgroundColor="l ime";
        pbody.style.bor der="solid black 1px";
        pbody.innerHTML ="This is a pop-up!";
        function show_popup()
        {
        p.show(150,150, 200,50,document .body);
        }
        function killpoopup()
        {
        p.hide();
        }
        </script>
        </head>

        <body>
        <a href="_blank" onmouseover="sh ow_popup()" onmouseout="kil lpoopup()">Show pop-up!</a>
        </body>

        </html>

        [/html]
        this is an IE-propriatary solution and shouldn't work with other browsers ...

        kind regards

        Comment

        Working...