Javascript hover-over HTML popup
This sample uses a hidden div tag containing a table that forms your popup. When the mouse hovers over the target text (in this case an anchor, although it could be an image or anything else that uses the onMouseOver event) the function ShowPopup is called and the position of the popup is set to that of the target text (the offsetTop and offsetLeft members), the popup is then set to visible.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript"> function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set position of hover-over popup hp.style.top = hoveritem.offsetTop + 18; hp.style.left = hoveritem.offsetLeft + 20; // Set popup to visible hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a> <br>This is some<br>incidental<br>Text. <div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;"> <table bgcolor="#0000FF"> <tr> <td><font color="#FFFFFF">This is my popup</font></td> </tr> <tr> <td bgcolor="#8888FF">Hello I am a popup table</td> </tr> </table> </div> |
You can find the sample source here.
