By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,921 Members | 1,433 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,921 IT Pros & Developers. It's quick & easy.

Mouseover box?

P: 3
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 ~
Feb 5 '08 #1
Share this Question
Share on Google+
3 Replies


gits
Expert Mod 5K+
P: 5,329
hi ...

here is an example:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function ttip(e, node, state) {
  3.     var x  = e.clientX;
  4.     var y  = e.clientY;
  5.     var id = node.id + '_ttip';
  6.  
  7.     if (state) {
  8.         var ttip        = document.createElement('span');
  9.         ttip.id         = id;
  10.         ttip.innerHTML  = 'test tip';
  11.  
  12.         ttip.style.position  = 'absolute';
  13.         ttip.style.top       = parseInt(y, 10) - 5 + 'px';
  14.         ttip.style.left      = parseInt(x, 10) + 5 + 'px';
  15.         ttip.style.border    = '1px solid red';
  16.         ttip.style.color     = 'red';
  17.  
  18.         ttip.style.backgroundColor = 'lightyellow';
  19.  
  20.         node.parentNode.appendChild(ttip);
  21.     } else {
  22.         var n = document.getElementById(id);
  23.  
  24.         if (n != null) {
  25.             node.parentNode.removeChild(n);
  26.         }
  27.     }
  28. }
  29. </script>
  30.  
  31. <div id="my_div" onmouseover="ttip(event, this, true);" onmouseout="ttip(event, this, false);">test</div>
  32.  
kind regards
Feb 5 '08 #2

hdanw
P: 61
this worx 2.

[html]
<html>
<head>
<script type="text/javascript">
var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="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="show_popup()" onmouseout="killpoopup()">Show pop-up!</a>
</body>

</html>

[/html]
Feb 6 '08 #3

gits
Expert Mod 5K+
P: 5,329
this worx 2.

[html]
<html>
<head>
<script type="text/javascript">
var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="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="show_popup()" onmouseout="killpoopup()">Show pop-up!</a>
</body>

</html>

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

kind regards
Feb 6 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.