******************************** js ******************************
<script>
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft +70000;
hp.style.right = hoveritem.offsetRight +70;
hp.style.bottom = hoveritem.offsetBottom +70;
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
***************************** html *****************************
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a>
<div id="hoverpopup" style="visibility:hidden; position:absolute; top:50px; left:300px; ">
<table bgcolor="#0000FF" style="width:500px; height:500px; margin-left:100px;">
<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>
<script>
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft +70000;
hp.style.right = hoveritem.offsetRight +70;
hp.style.bottom = hoveritem.offsetBottom +70;
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
***************************** html *****************************
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a>
<div id="hoverpopup" style="visibility:hidden; position:absolute; top:50px; left:300px; ">
<table bgcolor="#0000FF" style="width:500px; height:500px; margin-left:100px;">
<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>
thank you sir..
ReplyDelete