Page 1 of 1
JS mini window?
Posted: Wed Mar 12, 2008 4:02 pm
by newbie2php
Hi,
I looking for some javascript I could I use so that when you hover over a DIV it will show a small box with additional information. The ones I found so far open an actual new browser window - this is not what I need, I need it to display a small box which I can style.
Anybody got any links or pointers for something that can do this?
Thanks
Re: JS mini window?
Posted: Thu Mar 13, 2008 9:20 am
by Chalks
you could do something like this:
Code: Select all
function showdiv(divtoshow){ if (document.getElementById) document.getElementById(divtoshow).style.visibility = 'visible'; else { if (document.layers) // Netscape 4 document.divtoshow.visibility = 'visible'; else // IE 4 document.all.divtoshow.style.visibility = 'visible'; }} function hidediv(divtohide){ if (document.getElementById) document.getElementById(divtoshow).style.visibility = 'hidden'; else { if (document.layers) // Netscape 4 document.divtoshow.visibility = 'hidden'; else // IE 4 document.all.divtoshow.style.visibility = 'hidden'; }}
Code: Select all
<div id="showndiv" onmouseover="showdiv('hiddendiv')" onmouseout="hidediv('hiddendiv')"><p>Mouseover this div to show another div</p></div> <div id="hiddendiv" style="visibility: hidden"><p>This was hidden!</p></div>
Re: JS mini window?
Posted: Thu Mar 13, 2008 9:47 am
by pickle
What you're looking for is generally called a 'tooltip'. If you're familiar with jQuery, there's a nice jQuery tooltip plugin. If you want to stay away from frameworks (can't imagine why but that's your choice), look up the overLib library.