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.